Segmented — Playground

px
size
State
html.html
<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>
NameTypeDefaultDescription
[(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.
disabledbooleanfalseDisables every segment. Set by [formField] or directly.
invalidbooleanfalseMarks the control as having validation errors. Set by [formField].
errorsreadonly WithOptionalFieldTree<ValidationError>[][]Current validation errors. Set by [formField].
touchedbooleanfalseWhether 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].valuestring''Value emitted when the segment is selected.
button[kuiSegment].disabledbooleanfalseDisables one segment and removes it from keyboard selection.

Inputs verified against @kikita-labs/ui v1.6.1 public typings.