Segmented Control

Components

Segmented Control

Code

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

Name	Type	Description
`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	Description
`value`	`string`	The value of this item. Should be unique among sibling items.
`children`	`React.Node`
`disabled`	`boolean`	Disables user action and applies a disabled style on the component