Option

Horizontal value selector — a grey pill track with equal cells, the selected cell raised as a white pill. Picking a cell changes one value and nothing else; there is no panel underneath.

When to use

✅ Use when…	🚫 Avoid when…
A compact exclusive choice among 2–5 short options: side (buy / sell), percent of balance (25 / 50 / 75 / max), period (1D / 1W / 1M). The choice only sets a value — a form field, a filter, a chart range.	The selection swaps a content panel. Use `Tabs`. Options are long, many, or need descriptions. Use `Radio` in a `FieldGroup` or a `Select`. Several options can be on at once. Use `Checkbox`.

Basic

const [side, setSide] = useState('buy');
 
<Option
  label="Side"
  value={side}
  onChange={setSide}
  options={[
    { value: 'buy', label: 'Comprar' },
    { value: 'sell', label: 'Vender' },
  ]}
/>;

Sizes

small is the chip row under an input; medium (default) stands alone.

<Option size="small" value={pct} onChange={setPct} options={percentOptions} />

Width

fullWidth (default) stretches the track and divides it into equal cells. Pass fullWidth={false} for a content-sized track (toolbar switchers).

Accessibility

The track is a radiogroup; each cell is a radio with aria-checked. Tab lands on the selected cell; ←/→ (or ↑/↓) move the selection, wrapping and skipping disabled cells; Home/End jump to the ends. Give the group a name with label (or aria-labelledby when a visible label exists). Clicking the selected cell does nothing — the group always has exactly one value.

Properties


Prop	Type	Default	Description
`alignContent`	`"center" \| "start" \| "end" \| "between" \| "around" \| "evenly" \| "stretch"`	—	Packing of wrapped lines / grid tracks on the block axis.
`containment`	`string`	—	Containment marker for the `cq` channel: emits `container-type` (+ `container-name` when the string form carries one, e.g. `'inline-size card'`). Apply on the immediate wrapper of the adapting component — NEVER on page-level shells.
`cq`	`Partial<Record<ContainerSizeTypes, Partial<Omit<Partial<{ area: string; padding: string \| number; margin: string \| number; isHidden: boolean; truncate: boolean; pageShell: boolean; ... 14 more ...; transform: string; }>, "containment"> & Partial<...> & SizeFactoryProps & Partial<...>>>>`	—	Container-relative layout styles per `theme.containerSizes` key.
`enableBreakpoint`	`"xs" \| "xl" \| "sm" \| "md" \| "lg"`	—	Forces a breakpoint's prop set to apply regardless of viewport (stories/previews).
`fullWidth`	`boolean`	`true`	Stretch to the container width with equal cells.
`ignoreResponsive`	`boolean`	—	Fully disables the responsive factory (tests / fixed snapshots).
`justifyItems`	`"center" \| "start" \| "end" \| "stretch"`	—	Grid containers: inline alignment of every item in its cell.
`label`	`string`	—	Accessible name of the group (`aria-label` on the `radiogroup`). Prefer `aria-labelledby` when a visible label exists.
`onChange *`	`(value: string) => void`	—	Fired with the picked value. Not fired when the selected cell is clicked again.
`options *`	`OptionItem<string>[]`	—	Cells, in order. Two or more.
`pageShell`	`boolean`	—	Centers the element and caps the width at `theme.layout.pageMaxWidth`. The page shell of a classic centered layout.
`placeItems`	`"center" \| "start" \| "end" \| "stretch"`	—	Grid containers: `place-items` shorthand (block + inline).
`size`	`"small" \| "medium"`	`medium`	Cell height scale.
`transform`	`string`	—	CSS `transform` value (e.g. `translate(-50%, -33px)`). Never leaks to the DOM as an attribute.
`value *`	`string`	—	Currently selected value. Must match one `options[].value`.
`viewportMedias`	`Partial<Record<keyof BreakPoint<any>, Partial<Omit<Partial<{ area: string; padding: string \| number; margin: string \| number; isHidden: boolean; truncate: boolean; pageShell: boolean; container: boolean; ... 13 more ...; transform: string; }>, "containment"> & Partial<...> & SizeFactoryProps & Partial<...>>>> \| unde...`	—	Viewport-driven layout styles per `theme.breakpoints` key.

Besides the props above, the track accepts the layout props of a Flex.