Segmented — Playground
size
State
<kui-segmented [(value)]="view" aria-label="Project view">
<button kuiSegment value="list">List</button>
<button kuiSegment value="board">Board</button>
<button kuiSegment value="timeline">Timeline</button>
</kui-segmented>| Name | Type | Default | Description |
|---|---|---|---|
| [(value)] | string | '' | Selected segment value. Implements FormValueControl for [formField] integration, or bind directly for standalone use. |
| [(selected)] | string | '' | Deprecated alias for value, kept in sync with it. Use value instead; planned for removal in the next major version. |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Control height and spacing for the whole segmented group. |
| disabled | boolean | false | Disables every segment. Set by [formField] or directly. |
| invalid | boolean | false | Marks the control as having validation errors. Set by [formField]. |
| errors | readonly WithOptionalFieldTree<ValidationError>[] | [] | Current validation errors. Set by [formField]. |
| touched | boolean | false | Whether the control has been touched. Set by [formField]. |
| (touch) | void | - | Emitted when a segment is selected; marks the control as touched in the form system. |
| button[kuiSegment].value | string | '' | Value emitted when the segment is selected. |
| button[kuiSegment].disabled | boolean | false | Disables one segment and removes it from keyboard selection. |
Inputs verified against @kikita-labs/ui v1.6.1 public typings.