Component · Forms
a compact switch between 2–4 mutually exclusive options, shown as equal-width pills.
Example
Where available
Using it
the same component, named idiomatically per target. one CSS contract underneath, so they render identically.
| Target | Reference | Package |
|---|---|---|
| React | <SegmentedControl> | @design-foundry/lucent-react |
| Angular | <lucent-segmented-control> | @design-foundry/lucent |
| Web Components | <lucent-segmented-control> | @design-foundry/lucent-wc |
| Blazor | <LucentSegmentedControl> | DesignFoundry.Lucent |
API
| Prop | Type | Default | Description |
|---|---|---|---|
| options | {label,value,disabled?}[] | [] | segments (set as a property). |
| value | unknown | — | selected value. |
| size | xs | sm | md | lg | md | control density. |
| label | string | — | accessible group name. |