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

On this page

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

Arguments

Name	Type	Default	Description
`hide_labels`	`Boolean`	`false`	Whether to hide the labels and only show the icons
`full_width`	`Boolean`	`false`	If the component should be full width
`size`	`Symbol`	`:medium`	One of `:large`, `:medium`, or `:small`.
`system_arguments`	`Hash`	N/A	System arguments

Slots

`items`

Use to render an item in the segmented control

Name	Type	Default	Description
`system_arguments`	`Hash`	N/A	System 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 %>

Edit this page on GitHub