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.

import { SegmentedControl } from '@sproutsocial/racine'
() => {
const [value, setValue] = useState("orange");
return (
<SegmentedControl
selectedValue={value}
label="Fruits"
onChange={e => setValue(e.target.value)}
mb={0}
>
<SegmentedControl.Item value="apple">Apple</SegmentedControl.Item>
<SegmentedControl.Item value="orange">Orange</SegmentedControl.Item>
<SegmentedControl.Item value="banana">Banana</SegmentedControl.Item>
</SegmentedControl>
);
}

Properties

NameTypeDefaultDescriptionRequired?
selectedValuestring
The value of the currently selected item. Should match the value prop of one of the child items
labelstring
The title of the segmented control, used for accessibility purposes
onChange(e: SyntheticInputEvent<HTMLInputElement>) => void
Called when the user selects a new item. You can access the value of the newly selected item using "event.target.value"
disabledboolean
Disables user action and applies a disabled style on the component
childrenReact.Node

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.
childrenReact.Node
disabledboolean
Disables user action and applies a disabled style on the component