Segmented control

Segmented control is used to pick one choice from a linear set of closely related choices, and immediately apply that selection.

v0.21.0AlphaReviewed for accessibility

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

NameDefaultDescription
hide_labels

false

Boolean

Whether to hide the labels and only show the icons

full_width

false

Boolean

If the component should be full width

size

:medium

Symbol

One of :large, :medium, or :small.

system_arguments

N/A

Hash

Examples

Slots

items

Use to render an item in the segmented control

NameDefaultDescription
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

NameDefaultDescription
label

N/A

String

The label to use

selected

false

Boolean

Whether the item is selected

icon

nil

Symbol

The icon to use

hide_labels

false

Symbol

Whether to only show the icon

Slots

trailing_visual_label

Optional trailing Label

NameDefaultDescription
system_arguments

N/A

Hash

The arguments accepted by Button's with_trailing_visual_label slot.

Methods

with_trailing_visual_label

Optional trailing label.

NameDefaultDescription
system_arguments

N/A

Hash

The arguments accepted by Button's with_trailing_visual_label slot.