SegmentedControl

Select an enabled segment in any example to see the active pill move. The compact version fits its labels and shows a disabled option; fullWidth fills its container and distributes segments evenly. In a narrow rail, icons stack above labels so the full names remain visible. All examples use the theme's --cajon-radius-pill token for the outer track and active segment.

UsageCopy Anchor Link

import { SegmentedControl } from '@cajon-ui/react';

const [view, setView] = useState('chat');

<SegmentedControl
  aria-label="Chat rail view"
  fullWidth
  value={view}
  onChange={setView}
  items={[
    { value: 'chat', label: 'Chat', icon: <ChatIcon /> },
    { value: 'code', label: 'Code', icon: <CodeIcon /> },
    { value: 'notebooks', label: 'Notebooks', icon: <NotebookIcon /> },
  ]}
/>

Use arrow keys to move between enabled segments, or Home and End to jump to the first and last. Supply aria-label to name the group. Pair the selector with the view content it controls; when using tab panels, give each item controls for the panel id.

PropsCopy Anchor Link

Each item has value and label, with optional icon, hint, disabled, id, and controls fields.