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'
Properties
Name | Type | Default | Description | Required? |
---|---|---|---|---|
selectedValue | string | The value of the currently selected item. Should match the value prop of one of the child items | ||
label | string | 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" | ||
disabled | boolean | Disables user action and applies a disabled style on the component | ||
children | React.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.
Name | Type | Default | Description | Required? |
---|---|---|---|---|
value | string | The value of this item. Should be unique among sibling items. | ||
children | React.Node |