Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Toggle Group

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

Usage
example.blade.php 
<x-slate::toggle-group type="single" default-value="center" variant="outline">
    <x-slate::toggle-group-item value="start" aria-label="Align start">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
            <path d="M21 6H3M15 12H3M17 18H3" stroke-linecap="round" />
        </svg>
    </x-slate::toggle-group-item>
    <x-slate::toggle-group-item value="center" aria-label="Align center">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
            <path d="M21 6H3M17 12H7M19 18H5" stroke-linecap="round" />
        </svg>
    </x-slate::toggle-group-item>
    <x-slate::toggle-group-item value="end" aria-label="Align end">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
            <path d="M21 6H3M21 12H9M21 18H7" stroke-linecap="round" />
        </svg>
    </x-slate::toggle-group-item>
</x-slate::toggle-group>

Multiple
example.blade.php 
<x-slate::toggle-group type="multiple" default-value="bold" variant="outline">
    <x-slate::toggle-group-item value="bold" aria-label="Toggle bold">B</x-slate::toggle-group-item>
    <x-slate::toggle-group-item value="italic" aria-label="Toggle italic">I</x-slate::toggle-group-item>
    <x-slate::toggle-group-item value="underline" aria-label="Toggle underline">U</x-slate::toggle-group-item>
</x-slate::toggle-group>

Composition
code 
ToggleGroup
└── ToggleGroupItem

API Reference

ToggleGroup
Prop Type Default Description
type single | multiple single Selection mode
variant default | outline default Visual style for items
size default | sm | lg default Control size
default-value string — Initial value(s); comma-separated for multiple
Last updated .