Segmented control

A single-select group of segments.

import { BuiSegmentedControl } from 'ng-blatui';

<bui-segmented-control [(value)]="view" [options]="['list', 'grid', 'board']" />

Disabled

<bui-segmented-control [value]="'grid'" [options]="['list', 'grid', 'board']" [disabled]="true" />

<!-- size via an arbitrary child selector -->
<bui-segmented-control class="text-xs [&_button]:px-2 [&_button]:py-1" [options]="['list','grid']" />

Prop	Type	Default	Description
`options`	`readonly (string \| SegmentOption)[]`	`[]`	Available segments; plain strings are used as both value and label.

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`value`	`string`	`''`	Currently selected segment value. Two-way bindable with `[(value)]`.
`disabled`	`boolean`	`false`	Whether all segments are disabled. Two-way bindable with `[(disabled)]`.

SegmentOption

Field	Type	Description
`value`	`string`	Value emitted when this segment is selected.
`label`	`string`	Text shown on the segment button.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.