Variant selector

Pick a variant (pills or colours).

import { BuiVariantSelector } from 'ng-blatui';

<bui-variant-selector [(value)]="size" [options]="['S','M','L']" />

With disabled options

<bui-variant-selector [value]="'M'" [options]="['XS','S','M','L']" [disabled]="true" />

Colors

<!-- type="color" renders swatches from option.color -->
<bui-variant-selector [(value)]="colour" type="color" label="Colour"
  [options]="[{ value: 'black', label: 'Black', color: '#18181b' }, { value: 'blue', label: 'Blue', color: '#2563eb' }]" />

API reference

Inputs

Prop	Type	Default	Description
`options`	`readonly (string \| VariantOption)[]`	`[]`	Available options, as plain strings or `VariantOption` objects.
`type`	`"color" \| "pill"`	`'pill'`	Render style: text pills or colour swatches.
`label`	`string`	`'Variant'`	Accessible label for the radio group.
`disabled`	`boolean`	`false`	Whether the whole group is disabled.

Two-way models

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

Prop	Type	Default	Description
`value`	`string`	`''`	Selected variant value. Two-way bindable with `[(value)]`.

Types

VariantOption

Field	Type	Description
`value`	`string`	Unique value used as the selection identity.
`label`?	`string`	Display text; defaults to the value when omitted.
`color`?	`string`	CSS colour for the swatch when type is `color`.
`disabled`?	`false \| true`	Whether this option cannot be selected.

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