Toggle

Toggle Component

The Toggle component renders a styled checkbox toggle switch with optional labels, hints, and validation states. It's designed for interactive on/off switches and integrates well with Livewire or Alpine.js for dynamic behavior.

Example Usage

<x-toggle tooltip="Enable feature" label="Enable feature" placement="left" color="info" wire:model="isEnabled" />

Props

• label (string|null)
  Text label shown next to the toggle switch.

• color (string, default: "primary")
  Sets the color of the toggle when active. Options: primary, secondary, success, warning, danger, info.

• size (string, default: "md")
  Controls the size of the toggle. Options: sm, md, lg, xl.

• placement (string, default: "right")
  Position of the label relative to the toggle. Options: left, right.

• hint (string|null)
  Optional helper text shown below the toggle.

• showRequired (bool, default: true)
  Currently unused, but could be used to visually indicate required fields.

• showValidation (bool, default: true)
  Displays error messages when bound to a Livewire model and validation fails.

• tooltip (string|null)
  Adds a tooltip on hover to the entire toggle/label area.

Overview

This Toggle component provides a clean, accessible way to represent boolean state inputs with additional features like tooltips, label placement, hint messages, and validation integration. It's highly customizable via Tailwind classes and supports dark mode styling out of the box.