Skip to content

SegmentedControl

Use a segmented control to let users select an option from a short list and immediately apply the selection.
  • Alpha
  • Not reviewed for accessibility

Use a segmented control to let users select an option from a short list and immediately apply the selection

Arguments

NameTypeDefaultDescription
hide_labelsBooleanfalseWhether to hide the labels and only show the icons
full_widthBooleanfalseIf the component should be full width
sizeSymbol:mediumOne of :large, :medium, or :small.
system_argumentsHashN/ASystem arguments

Slots

items

Use to render an item in the segmented control

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments

Examples

Basic usage

<%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component| %>
<%= component.with_item(label: "Preview", selected: true) %>
<%= component.with_item(label: "Raw") %>
<%= component.with_item(label: "Blame") %>
<% end %>

Small

<%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |component| %>
<%= component.with_item(label: "Preview", selected: true) %>
<%= component.with_item(label: "Raw") %>
<%= component.with_item(label: "Blame") %>
<% end %>

With icons

<%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component| %>
<%= component.with_item(label: "Preview", icon: :eye, selected: true) %>
<%= component.with_item(label: "Raw", icon: :"file-code") %>
<%= component.with_item(label: "Blame", icon: :people) %>
<% end %>

With icons only

  • Preview
  • Raw
  • Blame
<%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true)) do |component| %>
<%= component.with_item(label: "Preview", icon: :eye, selected: true) %>
<%= component.with_item(label: "Raw", icon: :"file-code") %>
<%= component.with_item(label: "Blame", icon: :people) %>
<% end %>

Fill width of parent

<%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true)) do |component| %>
<%= component.with_item(label: "Preview", icon: :eye, selected: true) %>
<%= component.with_item(label: "Raw", icon: :"file-code") %>
<%= component.with_item(label: "Blame", icon: :people) %>
<% end %>