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

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, end: "Toggle using end wrapper")

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

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

  = daisy_toggle(name: "toggle_start_block", id: "toggle_start_block", checked: true) do |toggle|
    - toggle.with_start(css: "flex flex-row items-center") do
      Using
      = daisy_badge(css: "mx-1 badge-secondary badge-sm") do
        start
    - toggle.with_end(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

Small Toggle Default Size Toggle Large Toggle

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

Unchecked Toggle Checked Toggle Disabled Toggle Required Toggle

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

Toggle with Custom ID

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.

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

Enable location services

Receive marketing emails

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 .

Toggles

Basic Toggles

Toggles with Colors

Toggle Sizes

Toggle States

Custom ID

Rails Form Example

Using Label Component

Docs

Guides

Hero

Daisy