Toggle

A styled toggle switch. Built on <input type="checkbox"> with DaisyUI's toggle class. Renders as a sliding pill switch. Wrap in a <label> for accessible labelling.

Default

Off and on states.

toggle default

Off On

Colors

All eight DaisyUI color tokens, each checked.

toggle colors

primary secondary accent info success warning error neutral

Sizes

Five sizes: xs → xl.

toggle sizes

xs sm md lg xl

Disabled

Disabled off and on.

toggle disabled

Disabled off Disabled on

Settings panel

Real-world usage: notification preferences.

toggle settings

Email notifications

Receive updates via email

Push notifications

Browser push alerts

Marketing emails

Product news and offers

Dark mode

Switch to dark theme

2-factor auth

Extra security on sign-in

Label positions

Toggle on the left, right, or surrounded by labels.

toggle label positions

Label after (default) Label before Off On