Toggle

Switch control for boolean input states

Basic

Basic Toggle

Preview Code Auto

Input(type='checkbox', checked=True, cls='toggle')

Toggle with Icons

Preview Code Auto

Label(
    Input(type='checkbox'),
    NotStr("<svg aria-label='enabled' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g stroke-linejoin='round' stroke-linecap='round' stroke-width='4' fill='none' stroke='currentColor'><path d='M20 6 9 17l-5-5'></path></g></svg>"),
    NotStr("<svg aria-label='disabled' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18'/><path d='m6 6 12 12'/></svg>"),
    cls="toggle text-base-content",
)

With Fieldset and Labels

Preview Code Auto

Fieldset(
    Legend("Login options", cls='fieldset-legend'),
    Label(
        Input(type='checkbox', checked=True, cls='toggle'),
        "Remember me",
        cls='fieldset-label'
    ),
    cls='fieldset p-4 bg-base-100 border border-base-300 rounded-box w-64'
)

Variants

Color Variants

Preview Code Auto

Input(type='checkbox', checked=True, cls='toggle toggle-primary'),
Input(type='checkbox', checked=True, cls='toggle toggle-secondary'),
Input(type='checkbox', checked=True, cls='toggle toggle-accent'),
Input(type='checkbox', checked=True, cls='toggle toggle-neutral'),
Input(type='checkbox', checked=True, cls='toggle toggle-info'),
Input(type='checkbox', checked=True, cls='toggle toggle-success'),
Input(type='checkbox', checked=True, cls='toggle toggle-warning'),
Input(type='checkbox', checked=True, cls='toggle toggle-error'),

Custom Color

Preview Code Auto

Input(type='checkbox', checked=True,
    cls='toggleborder-indigo-600 bg-indigo-500 checked:bg-orange-400 checked:text-orange-800 checked:border-orange-500')

Size Variants

Preview Code Auto

Input(type='checkbox', checked=True, cls='toggle toggle-xs'),
Input(type='checkbox', checked=True, cls='toggle toggle-sm'),
Input(type='checkbox', checked=True, cls='toggle toggle-md'),
Input(type='checkbox', checked=True, cls='toggle toggle-lg'),
Input(type='checkbox', checked=True, cls='toggle toggle-xl'),

States

Disabled States

Preview Code Auto

Input(type='checkbox', disabled=True, cls='toggle'),
            Input(type='checkbox', disabled=True, checked=True, cls='toggle'),

Indeterminate State

Preview Code Auto

<!-- You can make a checkbox indeterminate using JS -->
Input(type='checkbox', id='my-toggle', cls='toggle', onclick="event.preventDefault()"),
Script('document.getElementById("my-toggle").indeterminate = true')

Class Reference

Class	Type	Description
toggle	Component	Base class
toggle-primary	Color	Primary color variant
toggle-secondary	Color	Secondary color variant
toggle-accent	Color	Accent color variant
toggle-neutral	Color	Neutral color variant
toggle-success	Color	Success color variant
toggle-warning	Color	Warning color variant
toggle-info	Color	Info color variant
toggle-error	Color	Error color variant
toggle-xs	Size	Extra small size
toggle-sm	Size	Small size
toggle-md	Size	Medium size (default)
toggle-lg	Size	Large size
toggle-xl	Size	Extra large size

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo