Skip to main content
Kaleidoscope

OptionGroupDeprecated

A segmented button group for selecting one option from a set. Deprecated in favour of SegmentedControl.

🚨 This component is deprecated

OptionGroup exists for backwards compatibility with the legacy Form component. For all new usage, use the component.

Default

A group of mutually exclusive options rendered as connected buttons. The user selects one value at a time.

Editable example
() => {
  const [selected, setSelected] = React.useState("s");

  return (
    <div style={{ width: "20em" }}>
      <OptionGroup
        size={OptionGroupSize.Small}
        onClickHandler={setSelected}
        options={[
          { label: "S", value: "s" },
          { label: "M", value: "m" },
          { label: "L", value: "l" },
        ]}
        selectedValue={selected}
      />
    </div>
  );
}

Best practices

  1. Use SegmentedControl for new work. OptionGroup is deprecated and only maintained for legacy Form integration.
  2. Keep the number of options small (2-5) so labels remain readable.
  3. Use short, scannable labels — single characters or brief words work best.

With a label

Pass label to render a heading above the option group.

Editable example
() => {
  const [selected, setSelected] = React.useState("m");

  return (
    <div style={{ width: "20em" }}>
      <OptionGroup
        label="Size"
        size={OptionGroupSize.Small}
        onClickHandler={setSelected}
        options={[
          { label: "S", value: "s" },
          { label: "M", value: "m" },
          { label: "L", value: "l" },
        ]}
        selectedValue={selected}
      />
    </div>
  );
}

Large size

Use OptionGroupSize.Large when options need more visual weight or contain longer labels.

Editable example
() => {
  const [selected, setSelected] = React.useState(1);

  return (
    <div style={{ width: "30em" }}>
      <OptionGroup
        size={OptionGroupSize.Large}
        onClickHandler={setSelected}
        options={[
          { label: "1-10", value: 0 },
          { label: "11-50", value: 1 },
          { label: "51-200", value: 2 },
          { label: "201+", value: 3 },
        ]}
        selectedValue={selected}
      />
    </div>
  );
}

With icons

Options can display icons instead of text labels. Pair with tooltipMessage so the meaning is clear.

Editable example
() => {
  const [selected, setSelected] = React.useState("left");

  return (
    <OptionGroup
      size={OptionGroupSize.Small}
      onClickHandler={setSelected}
      options={[
        { label: "left", value: "left", icon: <AlignLeft />, tooltipMessage: "Align left" },
        { label: "center", value: "center", icon: <AlignCenter />, tooltipMessage: "Align center" },
      ]}
      selectedValue={selected}
    />
  );
}