SegmentedControl

atom

Pill-style toggle group with an elevation-aware sliding indicator. Uses getBoundingClientRect with ResizeObserver for pixel-perfect positioning. Zero-padding track with 3px inset indicator. Focus ring only on keyboard navigation (:focus-visible).

"Add a SegmentedControl from lucent-ui with three options for switching between view modes. Use defaultValue."

Usage

React / JSX

import { SegmentedControl } from 'lucent-ui'

<SegmentedControl size="md"
  options={[
    { value: "grid", label: "Grid" },
    { value: "list", label: "List" },
    { value: "board", label: "Board" },
  ]}
  defaultValue="grid" />

Installation

pnpm add lucent-ui

API Reference

SegmentedControl props — * required

Prop	Type	Default	Description
`options`*	`{ value: string; label: string }[]`	—	The available options.
`defaultValue`	`string`	—	Initially selected value (uncontrolled).
`value`	`string`	—	Selected value (controlled).
`onChange`	`(value: string) => void`	—	Callback fired when the selection changes.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Controls the height and font size of the control.
`fullWidth`	`boolean`	`false`	Stretches the control to fill its container width.
`disabled`	`boolean`	`false`	Disables all options.

← PreviousToggle Next →Text

SegmentedControl

Default

Controlled

Usage

Installation

API Reference