Variant Selector

Choose a product variant — size pills or colour swatches — from an accessible radio group.

php artisan blatui:add variant-selector

Size

XS S M L XL

<x-ui.variant-selector
    name="size"
    label="Size"
    :options="['XS', 'S', 'M', 'L', 'XL']"
    value="M"
/>

Colors

Colour

<x-ui.variant-selector
    name="color"
    type="color"
    label="Colour"
    value="midnight"
    :options="[
        ['value' => 'midnight', 'label' => 'Midnight', 'color' => '#1e293b'],
        ['value' => 'crimson', 'label' => 'Crimson', 'color' => '#dc2626'],
        ['value' => 'emerald', 'label' => 'Emerald', 'color' => '#059669'],
        ['value' => 'amber', 'label' => 'Amber', 'color' => '#f59e0b'],
        ['value' => 'violet', 'label' => 'Violet', 'color' => '#7c3aed'],
    ]"
/>

With Disabled

Size

XS S M L XL

<x-ui.variant-selector
    name="size"
    label="Size"
    value="M"
    :options="[
        ['value' => 'XS', 'label' => 'XS'],
        ['value' => 'S', 'label' => 'S'],
        ['value' => 'M', 'label' => 'M'],
        ['value' => 'L', 'label' => 'L', 'disabled' => true],
        ['value' => 'XL', 'label' => 'XL'],
    ]"
/>