Laravel Toggle Component

Free · MIT

A switch-style toggle input component for boolean on/off states, with label, description, size, and color variants.

A Toggle built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::toggle>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::toggle label="Enable notifications" name="notifications" />

See the full API, props and live examples in the Toggle documentation.

Overview

The <x-aura::toggle> component renders a switch-style toggle control used for binary on/off settings. It is built on a hidden checkbox input, making it fully compatible with standard form submissions and Livewire wire:model binding. The toggle supports multiple sizes, color variants, and an optional label with description text.

Props

Prop	Type	Default	Description
`label`	`string\|null`	`null`	Text label displayed next to the toggle.
`description`	`string\|null`	`null`	Additional descriptive text shown below the label.
`size`	`string`	`'md'`	Size of the toggle switch. Options: `sm`, `md`, `lg`.
`color`	`string`	`'primary'`	Color applied when the toggle is in the "on" state. Options: `primary`, `secondary`, `success`, `danger`.
`disabled`	`bool`	`false`	Disables the toggle, preventing interaction.