Segmented
A single-choice view switcher — Attio's table / board toggle.
A single-choice toggle — Attio's view switcher: a subtle track with the selected option raised on a white pill. role="radiogroup" over role="radio" buttons with roving tabindex and ←/→ (Home/End) keyboard selection. Options can be text, icons, or both.
Preview
Usage
import { Segmented } from "crisp";
const [view, setView] = useState("table");
<Segmented
value={view}
onValueChange={setView}
options={[
{ value: "table", label: "Table" },
{ value: "board", label: "Board" },
]}
aria-label="View"
/>;API
| Prop | Type | Default | Description |
|---|---|---|---|
options | SegmentedOption[] | — | { value, label?, icon?, disabled?, aria-label? } |
value | string | — | Controlled value (omit to self-manage). |
defaultValue | string | first | Initial value when uncontrolled. |
onValueChange | (value: string) => void | — | Fires on selection. |