Checkboxes

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 hierarchy means, or by utilizing the leading and trailing 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 regular label Checkbox using trailing wrapper Checkbox using leading wrapper

Checkbox using trailing block

Using leading

and trailing blocks

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_trailing", id: "checkbox_trailing", checked: true, trailing: "Checkbox using trailing wrapper")

  = daisy_checkbox(name: "checkbox_leading", id: "checkbox_leading", checked: true, leading: "Checkbox using leading wrapper")

  = daisy_checkbox(name: "checkbox_trailing_block", id: "checkbox_trailing_block", checked: true) do |checkbox|
    - checkbox.with_trailing do
      :markdown
        Checkbox using `trailing` block

  = daisy_checkbox(name: "checkbox_both_labels", id: "checkbox_both_labels", checked: true) do |checkbox|
    - checkbox.with_leading(css: "flex flex-row items-center") do
      Using
      = daisy_badge(css: "mx-1 badge-secondary badge-sm") do
        leading
    - checkbox.with_trailing(css: "flex flex-row items-center") do
      and
      = daisy_badge(css: "mx-1 badge-secondary badge-sm") do
        trailing
      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

Indeterminate Checkbox

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

Disabled Checkbox

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

Checkbox with Custom ID

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.

Note

Like Rails' own check_box, every named, enabled checkbox also emits a companion hidden field just before the input, so an unchecked box still submits a value ("0" by default — customize it with unchecked_value). Pass include_hidden: false to opt out.

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, trailing: "Subscribe to newsletter")

Using Label Component

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

Preview

I agree to the terms of service

Receive product updates

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 .

Checkboxes

Basic Checkboxes

Checkboxes with Colors

Checkbox Sizes

Combining Colors and Sizes

Indeterminate State

Disabled Checkbox

Custom ID

Rails Form Example

Using Label Component

Docs

Guides

Loco

Daisy