Toggle

Toggle component documentation for Velyx. Installation, usage examples, sizes, states, and customization guidance for Laravel Blade, Alpine.js, Livewire, and Tailwind CSS v4.

Toggle

Toggles handle binary choices without forcing users through a full form submit or dropdown flow.

Installation

Add the toggle component to your project:

npx velyx@latest add toggle
pnpm dlx velyx@latest add toggle
yarn dlx velyx@latest add toggle
bunx --bun velyx@latest add toggle

Alpine.js Required: The toggle component uses Alpine.js for checked state and keyboard interactions.

Usage

Default Toggle

Toggle

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Toggle

Full preview from the registry iframe.

Open in tab

Loading preview...

Checked State

Toggle

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Toggle

Full preview from the registry iframe.

Open in tab

Loading preview...

With Description

Toggle

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Toggle

Full preview from the registry iframe.

Open in tab

Loading preview...

Sizes

Toggle

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Toggle

Full preview from the registry iframe.

Open in tab

Loading preview...

Toggle

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Toggle

Full preview from the registry iframe.

Open in tab

Loading preview...

Disabled

Toggle

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Toggle

Full preview from the registry iframe.

Open in tab

Loading preview...

Props

Prop Type Default Description
name string | null null Optional field name for form and Livewire binding
checked bool false Initial checked state
value mixed null Alternate incoming value used to resolve checked state
label string | null null Optional visible label
description string | null null Supporting text shown below the label
size string 'md' Toggle size: sm, md, or lg
disabled bool false Disables interaction
required bool false Marks the field as required in forms

Example Structure

<x-ui.toggle
    name="notifications"
    label="Email notifications"
    description="Keep me informed about releases and account activity."
    :checked="true"
/>

Accessibility

  • Role - Uses role="switch" with aria-checked
  • Keyboard - Supports Space and Enter
  • Labels - Works with visible labels and required indicators
  • Focus states - Includes visible focus ring styles

Next Steps