blatui

Components

Variant Selector

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

php artisan blatui:add variant-selector
Size 
<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 
<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'],
    ]"
/>

API Reference

Props, slots and exposed methods for <x-ui.variant-selector>.

Props

Prop Type Default Description
options* array [] The selectable variants, rendered as an accessible radio group. Pass a flat list of strings, or arrays for per-option labels, swatch colors, and disabling. See Each option below.
value string — The value of the option that is initially checked. Matched against each option's value (string comparison).
name string — The name attribute shared by the radio inputs, so the selection submits with a form. Defaults to a generated unique name when omitted.
type string 'pill' Visual style of the options. "pill" renders labelled chips; "color" renders round swatches tinted by each option's color with a checkmark on the selected one.
pill color
label string 'Variant' The visible group label, which also names the radio group for assistive tech. Pass an empty/false value to hide it.
disabled bool false Disables every option in the group. Individual options can also be disabled via their own disabled key.

* Required.

Each option

Prop Type Default Description
value string — The submitted value for this option. Falls back to label when omitted. When the option is a plain string, that string is used as both value and label.
label string — The text shown on the pill (or the accessible name / tooltip of a color swatch). Falls back to value when omitted.
color string — Any CSS color used to fill the swatch. Only applies when type is "color".
disabled bool false Makes just this option unselectable.