GitHub

Checkboxes

API Docs

Checkboxes are great for toggling an item on / off, or selecting multiple items from a list.

Basic Checkboxes

Basic checkboxes can be rendered with or without a label through standard heirarchy means, or by utilizing the start and end wrappers.

Note

While the LabelableComponent Concern does implement a floating_label attribute, it is not relevant for checkboxes and is not implemented.

Preview
Checkbox with no label
Code 
.my-2.flex.flex-col.gap-4
  %div
    = daisy_checkbox(name: "checkbox_no_label", id: "checkbox_no_label")
    .tooltip.tooltip-warning{ "data-tip": "CANNOT click the text to activate" }
      Checkbox with no label

  = daisy_label(for: "checkbox_with_label") do
    = daisy_checkbox(name: "checkbox_with_label", id: "checkbox_with_label")
    Checkbox with regular label

  = daisy_checkbox(name: "checkbox_end", id: "checkbox_end", checked: true, end: "Checkbox using end wrapper")

  = daisy_checkbox(name: "checkbox_start", id: "checkbox_start", checked: true, start: "Checkbox using start wrapper")

  = daisy_checkbox(name: "checkbox_end_block", id: "checkbox_end_block", checked: true) do |checkbox|
    - checkbox.with_end do
      :markdown
        Checkbox using `end` block

  = daisy_checkbox(name: "checkbox_both_labels", id: "checkbox_both_labels", checked: true) do |checkbox|
    - checkbox.with_start(css: "flex flex-row items-center") do
      Using
      = daisy_badge(css: "mx-1 badge-secondary badge-sm") do
        start
    - checkbox.with_end(css: "flex flex-row items-center") do
      and
      = daisy_badge(css: "mx-1 badge-secondary badge-sm") do
        end
      blocks

Checkboxes with Colors

Checkboxes can be styled with different colors using DaisyUI's color classes.

Note

Uses checkbox-neutral with dark backgrounds for dark mode compatibility.

Preview
Code 
.my-2.grid.grid-cols-1.md:grid-cols-2.gap-4
  = daisy_label(for: "checkbox_dark_mode") do
    = daisy_checkbox(name: "checkbox_dark_mode", id: "checkbox_dark_mode", css: "checkbox-neutral theme-controller", value: "dark", checked: false)
    Enable Dark Mode

  = daisy_label(for: "checkbox_primary") do
    = daisy_checkbox(name: "checkbox_primary", css: "checkbox-primary", id: "checkbox_primary", checked: true)
    Primary

  = daisy_label(for: "checkbox_secondary") do
    = daisy_checkbox(name: "checkbox_secondary", css: "checkbox-secondary", id: "checkbox_secondary", checked: true)
    Secondary

  = daisy_label(for: "checkbox_accent") do
    = daisy_checkbox(name: "checkbox_accent", css: "checkbox-accent", id: "checkbox_accent", checked: true)
    Accent

  = daisy_label(for: "checkbox_success") do
    = daisy_checkbox(name: "checkbox_success", css: "checkbox-success", id: "checkbox_success", checked: true)
    Success

  = daisy_label(for: "checkbox_warning") do
    = daisy_checkbox(name: "checkbox_warning", css: "checkbox-warning", id: "checkbox_warning", checked: true)
    Warning

  = daisy_label(for: "checkbox_error") do
    = daisy_checkbox(name: "checkbox_error", css: "checkbox-error", id: "checkbox_error", checked: true)
    Error

  = daisy_label(for: "checkbox_info") do
    = daisy_checkbox(name: "checkbox_info", css: "checkbox-info", id: "checkbox_info", checked: true)
    Info

Checkbox Sizes

Checkboxes come in different sizes using DaisyUI's size classes.

Preview
Code 
.my-2.flex.flex-col.gap-8
  .flex.items-center.gap-4
    = daisy_label(for: "checkbox_extra_small") do
      = daisy_checkbox(name: "checkbox_extra_small", id: "checkbox_extra_small", css: "checkbox-xs", checked: true)
      Extra Small

  .flex.items-center.gap-4
    = daisy_label(for: "checkbox_small") do
      = daisy_checkbox(name: "checkbox_small", id: "checkbox_small", css: "checkbox-sm", checked: true)
      Small

  .flex.items-center.gap-4
    = daisy_label(for: "checkbox_medium") do
      = daisy_checkbox(name: "checkbox_medium", id: "checkbox_medium", css: "checkbox-md", checked: true)
      Medium (Default)

  .flex.items-center.gap-4
    = daisy_label(for: "checkbox_large") do
      = daisy_checkbox(name: "checkbox_large", id: "checkbox_large", css: "checkbox-lg", checked: true)
      Large

  .flex.items-center.gap-4
    = daisy_label(for: "checkbox_extra_large") do
      = daisy_checkbox(name: "checkbox_extra_large", id: "checkbox_extra_large", css: "checkbox-xl", checked: true)
      Extra Large

Combining Colors and Sizes

You can combine both color and size classes to create different variations.

Preview
Code 
.my-2.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.gap-6
  = daisy_label(for: "checkbox_primary_small") do
    = daisy_checkbox(name: "checkbox_primary_small", id: "checkbox_primary_small", css: "checkbox-primary checkbox-sm", checked: true)
    Primary Small

  = daisy_label(for: "checkbox_secondary_medium") do
    = daisy_checkbox(name: "checkbox_secondary_medium", id: "checkbox_secondary_medium", css: "checkbox-secondary checkbox-md", checked: true)
    Secondary Medium

  = daisy_label(for: "checkbox_accent_large") do
    = daisy_checkbox(name: "checkbox_accent_large", id: "checkbox_accent_large", css: "checkbox-accent checkbox-lg", checked: true)
    Accent Large

  = daisy_label(for: "checkbox_info_small") do
    = daisy_checkbox(name: "checkbox_info_small", id: "checkbox_info_small", css: "checkbox-info checkbox-sm", checked: true)
    Info Small

  = daisy_label(for: "checkbox_success_medium") do
    = daisy_checkbox(name: "checkbox_success_medium", id: "checkbox_success_medium", css: "checkbox-success checkbox-md", checked: true)
    Success Medium

  = daisy_label(for: "checkbox_warning_large") do
    = daisy_checkbox(name: "checkbox_warning_large", id: "checkbox_warning_large", css: "checkbox-warning checkbox-lg", checked: true)
    Warning Large

Indeterminate State

Checkboxes can be set to an indeterminate state to indicate that the value is neither checked nor unchecked. This is commonly used for "Select All" checkboxes where some items are selected and others are not.

Note

You must set the indeterminate attribute through JavaScript.

Preview
Code 
.my-2.flex.flex-col.gap-4
  = daisy_label(for: "checkbox_indeterminate_state") do
    = daisy_checkbox(name: "checkbox_indeterminate_state", id: "checkbox_indeterminate_state")
    Indeterminate Checkbox

  :javascript
    document.getElementById("checkbox_indeterminate_state").indeterminate = true;

Disabled Checkbox

Checkboxes can be disabled using the disabled attribute.

Preview
Code 
.my-2.flex.flex-col.gap-4
  = daisy_label(for: "checkbox_disabled_state", css: "cursor-not-allowed") do
    = daisy_checkbox(name: "checkbox_disabled_state", id: "checkbox_disabled_state", disabled: true)
    Disabled Checkbox

Custom ID

Checkboxes can be given a custom ID using the id attribute.

Preview
Code 
.my-2.flex.flex-col.gap-4
  = daisy_label(for: "custom-checkbox") do
    = daisy_checkbox(name: "checkbox12", id: "custom-checkbox")
    Checkbox with Custom ID

Rails Form Example

The built-in Form Builder extension provides an even easier way to use checkboxes in your pages by extracting the name and ID attributes from the form object and attributes.

Preview
Code 
= form_with(url: "#", method: :post, scope: :user, class: "flex flex-col gap-8") do |form|
  = form.daisy_label(:terms) do
    = form.daisy_checkbox(:terms)
    I accept the terms and conditions

  = form.daisy_checkbox(:newsletter, toggle: true, end: "Subscribe to newsletter")

Using Label Component

You can also use the Label component directly with checkboxes for fully custom approach.

Preview
Code 
.my-2.flex.flex-col.gap-4
  .flex.items-center.space-x-2
    = daisy_checkbox(name: "agree", id: "agree")
    = daisy_label(for: "agree", title: "I agree to the terms of service")

  .flex.items-center.space-x-2.mt-4
    = daisy_checkbox(name: "updates", id: "updates", toggle: true)
    = daisy_label(for: "updates") do
      Receive product updates
Made with by Profoundry .
Copyright © 2023-2025 Profoundry LLC.
All rights reserved.
to select
to navigate
esc to close