SegmentedControl

readyReviewed for a11y

This page may be removed. Primer plans to move all Rails component documentation to Lookbook.

Description

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

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	Required	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 `:large`, `:medium`, or `:small`.
system_arguments		`Hash` System arguments

Slots

`items`

Use to render an item in the segmented control

Name	Required	Description
system_arguments		`Hash` System arguments

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	Required	Description
label		`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	Required	Description
system_arguments		`Hash` The arguments accepted by `Primer::Beta::Button`'s `with_trailing_visual_label` slot.

Methods

`with_trailing_visual_label(system_arguments: Hash)`

Optional trailing label.

Parameters

Name	Required	Description
system_arguments		`Hash` The arguments accepted by `Primer::Beta::Button`'s `with_trailing_visual_label` slot.