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>
  );
}

() => {
  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	Default	Description	Required?
`value`	`string`		The value of this item. Should be unique among sibling items.
`children`	`React.Node`