Toggle

Stable

Toggle switch component built on checkbox semantics with DaisyUI styling, sizes, colors, and form validation states.

API Reference

Attribute	Description	Type	Default
`label`	Toggle label text	string	`""`
`color`	Toggle color theme	string	`"primary"`
`size`	Toggle size variant	string	`"md"`
`checked`	Sets toggle as enabled by default	boolean	`False`
`disabled`	Disables toggle interaction	boolean	`False`
`required`	Marks toggle field as required	boolean	`False`
`hint`	Helper text shown below the toggle	string	`""`
`error`	Single error message text	string	`""`
`errors`	List of error message strings	list	`[]`
`hx`	HTMX event integration for server-side reactivity	string	`""`

color

primary secondary accent neutral success warning info error

size

xs sm md lg xl

Checkbox semantics: the toggle is built on a native <input type="checkbox"> so it is fully keyboard accessible (Tab to focus, Space to toggle) and announces state changes to screen readers.

Labels: always provide a label — it is associated with the checkbox via for/id so screen readers announce both the label and checked state on focus.

Errors: error messages are linked via aria-describedby so assistive technology announces validation feedback when the field is focused.

Examples

Usage


<c-toggle label="Enable notifications" />
<c-toggle label="Remember this device" :checked=True />

Basic Toggle

Enable notifications

Remember this device

<c-toggle label="Enable notifications" />
<c-toggle label="Remember this device" :checked=True />

Without Labels

<c-toggle />
<c-toggle :checked=False />
<c-toggle checked />
<c-toggle :checked=True />

Colors

Primary

Secondary

Accent

Neutral

Success

Warning

Info

Error

<c-toggle label="Primary" color="primary" :checked=True />
<c-toggle label="Success" color="success" :checked=True />
<c-toggle label="Error" color="error" :checked=True />

Sizes

Extra Small

Small

Medium (default)

Large

Extra Large

<c-toggle label="Small" size="sm" :checked=True />
<c-toggle label="Large" size="lg" :checked=True />
<c-toggle label="Extra Large" size="xl" :checked=True />

Disabled

Disabled On

<c-toggle label="Disabled Off" :disabled=True />
<c-toggle label="Disabled On" :checked=True :disabled=True />

Hint and Error

* Push notifications

Enable to receive mobile alerts.

Accept privacy policy

You must accept the privacy policy.

Security setting

Invalid toggle state

Please try again

<c-toggle label="Push notifications" hint="Enable to receive mobile alerts." />
<c-toggle label="Accept privacy policy" error="You must accept the privacy policy." />
<c-toggle label="Security setting" :errors="['Invalid toggle state', 'Please try again']" />