Segmented control
Segmented control is used to pick one choice from a linear set of closely related choices, and immediately apply that selection.
On this page
Description
Use a segmented control to let users select an option from a short list and immediately apply the selection
Accessibility
A SegmentedControl
should not be used in a form as a replacement for something like a radio group or select.
See the Accessibility section of the SegmentedControl interface guidelines for more details.
Arguments
Name | Default | Description |
---|---|---|
hide_labels |
| Boolean Whether to hide the labels and only show the icons |
full_width |
| Boolean If the component should be full width |
size |
| Symbol One of |
system_arguments | N/A | Hash |
Examples
Slots
items
Use to render an item in the segmented control
Name | Default | Description |
---|---|---|
system_arguments | N/A | Hash |
SegmentedControl::Item
SegmentedControl::Item is a private component that is only used by SegmentedControl It wraps the Button and IconButton components to provide the correct styles
Arguments
Name | Default | Description |
---|---|---|
label | N/A | String The label to use |
selected |
| Boolean Whether the item is selected |
icon |
| Symbol The icon to use |
hide_labels |
| Symbol Whether to only show the icon |
Slots
trailing_visual_label
Optional trailing Label
Name | Default | Description |
---|---|---|
system_arguments | N/A | Hash The arguments accepted by Button's |
Methods
with_trailing_visual_label
Optional trailing label.
Name | Default | Description |
---|---|---|
system_arguments | N/A | Hash The arguments accepted by Button's |