Segmented Control

An alternative to Select. Options are presented as selectable, buttons which wrap inside of a container

Choose your team

Ferrari

Mercedes-Benz

Red Bull

Renault

McLaren

Torro Rosso

HAAS

() => {
  const [selectedTeam, setSelectedTeam] = React.useState('ferrari')
  return (
    <SegmentedControl
      label="Choose your team"
      value={selectedTeam}
      onChange={t => setSelectedTeam(t)}
      options={[
        { value: 'ferrari', label: 'Ferrari' },
        { value: 'mercedes', label: 'Mercedes-Benz', isDisabled: true },
        { value: 'redbull', label: 'Red Bull' },
        'Renault',
        { value: 'mclaren', label: 'McLaren' },
        'Torro Rosso',
        'HAAS',
      ]}
    />
  )
}

() => {
  const [selectedTeam, setSelectedTeam] = React.useState('ferrari')
  return (
    <SegmentedControl
      label="Choose your team"
      value={selectedTeam}
      onChange={t => setSelectedTeam(t)}
      options={[
        { value: 'ferrari', label: 'Ferrari' },
        { value: 'mercedes', label: 'Mercedes-Benz', isDisabled: true },
        { value: 'redbull', label: 'Red Bull' },
        'Renault',
        { value: 'mclaren', label: 'McLaren' },
        'Torro Rosso',
        'HAAS',
      ]}
    />
  )
}

Props

Options can be strings...

options={["Ferrari", "Mercedes"]}

or objects...

options={[
  {label: "Ferrari", value: "FERRARI"},
  {label: "Mercedes-Benz AMG", value: "MERCEDES", isDisabled}
]}

SegmentedControlWithValidation

Use this as a child of the <Form/> component. Form takes care of the value and onChange prop, so these are not required.

<Form>
  {form => (
    <SegmentedControlWithValidation
      form={form}
      name="favouriteTeam"
      label="Choose your team"
      options={[
        "Ferrari",
        "Mercedes-Benz",
        "Red Bull",
        "Renault",
        "McLaren",
        "Torro Rosso",
        "HAAS"
      ]}
    />
  )}
</Form>