Components

Toggle Group

A set of two-state buttons that can be toggled on or off.

php artisan blatui:add toggle-group
<x-ui.toggle-group type="single" variant="outline" value="center">
    <x-ui.toggle-group-item value="left" aria-label="Align left">
        <x-lucide-align-left />
    </x-ui.toggle-group-item>
    <x-ui.toggle-group-item value="center" aria-label="Align center">
        <x-lucide-align-center />
    </x-ui.toggle-group-item>
    <x-ui.toggle-group-item value="right" aria-label="Align right">
        <x-lucide-align-right />
    </x-ui.toggle-group-item>
</x-ui.toggle-group>

Multiple

<x-ui.toggle-group type="multiple" variant="outline" :value="['bold']">
    <x-ui.toggle-group-item value="bold" aria-label="Toggle bold">
        <x-lucide-bold />
    </x-ui.toggle-group-item>
    <x-ui.toggle-group-item value="italic" aria-label="Toggle italic">
        <x-lucide-italic />
    </x-ui.toggle-group-item>
    <x-ui.toggle-group-item value="underline" aria-label="Toggle underline">
        <x-lucide-underline />
    </x-ui.toggle-group-item>
</x-ui.toggle-group>