Checkbox

Allow users to select one or multiple options from a set

Basic

Basic Checkbox

Default checkbox input

Preview Code Auto

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

With Fieldset and Label

Preview Code Auto

Fieldset(
    Legend('Login options', cls='fieldset-legend'),
    Label(
        'Remember me',
        Input(type='checkbox', checked='checked', cls='checkbox'),
        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='checked', cls='checkbox checkbox-primary'),
Input(type='checkbox', checked='checked', cls='checkbox checkbox-secondary'),
Input(type='checkbox', checked='checked', cls='checkbox checkbox-neutral'),
Input(type='checkbox', checked='checked', cls='checkbox checkbox-accent'),
Input(type='checkbox', checked='checked', cls='checkbox checkbox-info'),
Input(type='checkbox', checked='checked', cls='checkbox checkbox-success'),
Input(type='checkbox', checked='checked', cls='checkbox checkbox-warning'),
Input(type='checkbox', checked='checked', cls='checkbox checkbox-error'),

Size Variants

Different checkbox sizes

Preview Code Auto

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

Disabled State

Preview Code Auto

Input(type='checkbox', disabled=true, cls='checkbox'),
Input(type='checkbox', disabled=true, checked='checked', cls='checkbox'),

Indeterminate State

Preview Code Auto

Input(type='checkbox', id='my-checkbox', cls='checkbox', onclick="event.preventDefault()"),
Script('document.getElementById("my-checkbox").indeterminate = true')

Custom

Custom Colors

Checkbox with custom color styling

Preview Code Auto

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

Class Reference

Class	Type	Description
checkbox	Component	Base checkbox class
checkbox-primary	Color	Primary color variant
checkbox-secondary	Color	Secondary color variant
checkbox-neutral	Color	Neutral color variant
checkbox-accent	Color	Accent color variant
checkbox-info	Color	Info color variant
checkbox-success	Color	Success color variant
checkbox-warning	Color	Warning color variant
checkbox-error	Color	Error color variant
checkbox-xs	Size	Extra small size
checkbox-sm	Size	Small size
checkbox-md	Size	Medium size (default)
checkbox-lg	Size	Large size
checkbox-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