Components

Segmented Control

Segmented controls are used for quickly selecting between a small set of mutually exclusive options.

Segmented Controls work like a group of radio inputs in that no more than one may be selected at a time. Use this component for scenarios where there are only a few options. If you need to present a lot of options to the user, consider using another component such as Select.

Fruits
import { SegmentedControl } from '@sproutsocial/racine'

Properties

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

NameTypeDefaultDescriptionRequired?
selectedValuestring
The value of the currently selected item. Should match the `value` prop of one of the child Item components
labelstring
The title of the segmented control, used for accessibility purposes.
onChangesignature
Called when the user selects a new item. You can access the value of the newly selected item using `event.target.value`
childrenReactNode

Subcomponents

Item

SegmentedControl.Item is used to represent the individual items within a segmented control. Each item has an associated value that is matched agains the selectedValue of the parent component to determine whether the item is selected or not.

NameTypeDefaultDescriptionRequired?
valuestring
The value of this item. Should be unique among sibling items.
childrenReactNode