v0.8.0.pre
GitHub

Toggles

API Docs

The Toggle component is a wrapper around the Checkbox component that sets the toggle property to true by default, providing a switch-like appearance.

Basic Toggles

Toggles are switches that allow users to turn options on or off. They're a visual alternative to checkboxes, ideal for settings and preferences.

Note

While the LabelableComponent Concern does implement a floating attribute, it is not relevant for toggles and does not render properly.

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

  = daisy_label(for: "toggle1") do
    = daisy_toggle(name: "toggle1", id: "toggle1")
    Default Toggle with regular label

  = daisy_toggle(name: "toggle_end", id: "toggle_end", checked: true, trailing: "Toggle using end wrapper")

  = daisy_toggle(name: "toggle_start", id: "toggle_start", checked: true, leading: "Toggle using start wrapper")

  = daisy_toggle(name: "toggle_end_block", id: "toggle_end_block", checked: true) do |toggle|
    - toggle.with_trailing do
      :markdown
        Toggle using `trailing` block

  = daisy_toggle(name: "toggle_start_block", id: "toggle_start_block", checked: true) do |toggle|
    - toggle.with_leading(css: "flex flex-row items-center") do
      Using
      = daisy_badge(css: "mx-1 badge-secondary badge-sm") do
        start
    - toggle.with_trailing(css: "flex flex-row items-center") do
      and
      = daisy_badge(css: "mx-1 badge-secondary badge-sm") do
        end
      blocks

Toggles with Colors

Toggles can be styled with different colors using CSS classes like toggle-primary.

Preview
Code 
.my-2.flex.flex-col.gap-4
  = daisy_label(for: "toggle-dark") do
    = daisy_toggle(name: "toggle-dark", id: "toggle-dark", css: "toggle-neutral theme-controller", value: "dark", checked: false)
    Enable Dark Mode

  = daisy_label(for: "toggle_primary") do
    = daisy_toggle(name: "toggle_primary", css: "toggle-primary", id: "toggle_primary", checked: true)
    Primary Toggle

  = daisy_label(for: "toggle_secondary") do
    = daisy_toggle(name: "toggle_secondary", css: "toggle-secondary", id: "toggle_secondary", checked: true)
    Secondary Toggle

  = daisy_label(for: "toggle_accent") do
    = daisy_toggle(name: "toggle_accent", css: "toggle-accent", id: "toggle_accent", checked: true)
    Accent Toggle

  = daisy_label(for: "toggle_success") do
    = daisy_toggle(name: "toggle_success", css: "toggle-success", id: "toggle_success", checked: true)
    Success Toggle

  = daisy_label(for: "toggle_warning") do
    = daisy_toggle(name: "toggle_warning", css: "toggle-warning", id: "toggle_warning", checked: true)
    Warning Toggle

  = daisy_label(for: "toggle_error") do
    = daisy_toggle(name: "toggle_error", css: "toggle-error", id: "toggle_error", checked: true)
    Error Toggle

Toggle Sizes

Toggles come in different sizes by applying CSS classes.

Preview
Code 
.my-2.flex.flex-col.gap-4
  = daisy_label(for: "toggle_small") do
    = daisy_toggle(name: "toggle_small", id: "toggle_small", css: "toggle-sm")
    Small Toggle

  = daisy_label(for: "toggle_default") do
    = daisy_toggle(name: "toggle_default", id: "toggle_default")
    Default Size Toggle

  = daisy_label(for: "toggle_large") do
    = daisy_toggle(name: "toggle_large", id: "toggle_large", css: "toggle-lg")
    Large Toggle

Toggle States

Toggles can be in different states such as checked, disabled, or required.

Preview
Code 
.my-2.flex.flex-col.gap-4
  = daisy_label(for: "toggle_unchecked") do
    = daisy_toggle(name: "toggle_unchecked", id: "toggle_unchecked")
    Unchecked Toggle

  = daisy_label(for: "toggle_checked") do
    = daisy_toggle(name: "toggle_checked", id: "toggle_checked", checked: true)
    Checked Toggle

  = daisy_label(for: "toggle_disabled", css: "cursor-not-allowed") do
    = daisy_toggle(name: "toggle_disabled", id: "toggle_disabled", disabled: true)
    Disabled Toggle

  = daisy_label(for: "toggle_required") do
    = daisy_toggle(name: "toggle_required", id: "toggle_required", required: true)
    Required Toggle

Custom ID

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

Preview
Code 
.my-2.flex.flex-col.gap-4
  = daisy_label(for: "custom-toggle-id") do
    = daisy_toggle(name: "toggle_custom", id: "custom-toggle-id")
    Toggle with Custom ID

Rails Form Example

The built-in Form Builder extension provides an even easier way to use toggles 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 toggle also emits a companion hidden field just before the input, so a toggle that is off still submits a value ("0" by default — customize it with unchecked_value). No more hand-rolled hidden_field_tag pairs. Pass include_hidden: false to opt out.

Preview
Code 
= form_with(url: "#", method: :post, scope: :user) do |form|
  .flex.flex-col.gap-4
    = form.daisy_label(:notifications) do
      = form.daisy_toggle(:notifications)
      Enable notifications

    = form.daisy_label(:dark_mode) do
      = form.daisy_toggle(:dark_mode, css: "toggle-primary theme-controller", value: "dark")
      Enable dark mode

Using Label Component

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

Preview
Code 
.my-2.flex.flex-col.gap-4.w-80
  .flex.items-center.justify-between
    = daisy_label(for: "location", title: "Enable location services")
    = daisy_toggle(name: "location", id: "location")

  .flex.items-center.justify-between
    = daisy_label(for: "marketing") do
      Receive marketing emails
    = daisy_toggle(name: "marketing", id: "marketing", css: "toggle-primary")
Made with by Profoundry .
Copyright © 2023-2026 Profoundry LLC.
All rights reserved.
to select
to navigate
esc to close