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>Segmented
{{-- A text segmented control — single select across a date range. --}}
<x-ui.toggle-group type="single" variant="outline" value="30d">
<x-ui.toggle-group-item value="today" class="px-3">Today</x-ui.toggle-group-item>
<x-ui.toggle-group-item value="7d" class="px-3">7D</x-ui.toggle-group-item>
<x-ui.toggle-group-item value="30d" class="px-3">30D</x-ui.toggle-group-item>
<x-ui.toggle-group-item value="3m" class="px-3">3M</x-ui.toggle-group-item>
<x-ui.toggle-group-item value="6m" class="px-3">6M</x-ui.toggle-group-item>
</x-ui.toggle-group>Sizes
<div class="flex flex-col items-start gap-3">
<x-ui.toggle-group type="single" variant="outline" size="sm" 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>
<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>
<x-ui.toggle-group type="single" variant="outline" size="lg" 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>
</div>Vertical
{{-- Vertical orientation: items stack and join top-to-bottom. --}}
<x-ui.toggle-group type="single" variant="outline" orientation="vertical" value="list" class="w-40">
<x-ui.toggle-group-item value="grid" aria-label="Grid view">
<x-lucide-layout-grid /> Grid
</x-ui.toggle-group-item>
<x-ui.toggle-group-item value="list" aria-label="List view">
<x-lucide-list /> List
</x-ui.toggle-group-item>
<x-ui.toggle-group-item value="columns" aria-label="Columns view">
<x-lucide-columns-3 /> Columns
</x-ui.toggle-group-item>
</x-ui.toggle-group>Using with Livewire
wire:model
The examples above are the frontend (Blade + Alpine) usage. Inside a Livewire component, bind
wire:model for two-way
state — same component, no wrappers.
Full Livewire guide →
app/Livewire/Demo.php
use Livewire\Component;
class Demo extends Component
{
public array $tools = [];
public function render()
{
return view('livewire.demo');
}
}
resources/views/livewire/demo.blade.php
<x-ui.toggle-group type="multiple" wire:model="tools">
<x-ui.toggle-group-item value="bold">B</x-ui.toggle-group-item>
<x-ui.toggle-group-item value="italic">I</x-ui.toggle-group-item>
</x-ui.toggle-group>API Reference
Props, slots and exposed methods for
<x-ui.toggle-group>.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type |
string
|
'single'
|
Selection mode. "single" keeps one item active (value is a string or null); "multiple" allows many (value is an array).
single
multiple
|
value |
string|array
|
— | Initially selected item value(s). Pass a string in single mode, or an array in multiple mode. |
variant |
string
|
'default'
|
Visual style applied to every item. Set once on the group; items inherit it.
default
outline
|
size |
string
|
'default'
|
Control size applied to every item. Set once on the group; items inherit it.
default
sm
lg
|
orientation |
string
|
'horizontal'
|
Layout direction and arrow-key navigation axis for the group.
horizontal
vertical
|
Slots
| Slot | Description |
|---|---|
default |
The group items, each an <x-ui.toggle-group-item value="…"> with an icon or label. Items inherit the group variant and size. |
Methods
Available on the component's Alpine scope — call them from markup in the slot
(e.g. @click="…").
| Method | Description |
|---|---|
toggle(v) |
Toggles the item with value v on or off, respecting single vs multiple mode. Called when an item is clicked. |
isOn(v) |
Returns whether the item with value v is currently selected. |