Toggle

Toggle is a checkbox that is styled to look like a switch button.

Class name
Type
form-controlComponent Container element
toggleComponent For checkbox
toggle-primary
Modifier
Adds `primary` to toggle
toggle-secondary
Modifier
Adds `secondary` to toggle
toggle-accent
Modifier
Adds `accent` to toggle
toggle-success
Modifier
Adds `success` to toggle
toggle-warning
Modifier
Adds `warning` to toggle
toggle-info
Modifier
Adds `info` to toggle
toggle-error
Modifier
Adds `error` to toggle
toggle-lg
Responsive
Large toggle
toggle-md
Responsive
Medium toggle (default)
toggle-sm
Responsive
Small toggle
toggle-xs
Responsive
Extra small toggle
# Toggle
# With label and form-control
# Checkboxes with brand colors
# Checkboxes with state colors
# Sizes
# Disabled
# Disabled and checked
# Indeterminate
# Toggle with custom color
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details