v0.6.0
GitHub

Radio Buttons

API Docs

Interactive selection controls for choosing one option from a group. Automatically grouped by name attribute with customizable styling and labels for form inputs and preference settings.

Basic Radio Buttons

Radio buttons are used to select a single option from a set of options. Radio buttons with the same name attribute are automatically grouped together.

Preview
Code 
.my-2.flex.flex-col.gap-4
  = daisy_label(for: "radio1") do
    = daisy_radio(name: "radio_group1", id: "radio1", value: "1")
    Option 1

  = daisy_label(for: "radio2") do
    = daisy_radio(name: "radio_group1", id: "radio2", value: "2", checked: true)
    Option 2

  = daisy_label(for: "radio3") do
    = daisy_radio(name: "radio_group1", id: "radio3", value: "3")
    Option 3

Radio Buttons with Labels

Radio buttons can use the start and end label options for inline labeling, or custom blocks for more complex label content.

Note

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

Preview
Code 
.my-2.flex.flex-col.gap-4
  = daisy_radio(name: "radio_end", id: "radio_end", value: "1", checked: true, end: "Radio using end wrapper")

  = daisy_radio(name: "radio_start", id: "radio_start", value: "2", checked: true, start: "Radio using start wrapper")

  = daisy_radio(name: "radio_end_block", id: "radio_end_block", value: "3", checked: true) do |radio|
    - radio.with_end do
      :markdown
        Radio using `end` block

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

Radio Buttons with Colors

Radio buttons can be styled with different colors using DaisyUI utility classes.

Preview
Code 
.my-2.flex.flex-col.gap-4
  = daisy_label(for: "radio4") do
    = daisy_radio(name: "radio_group2", id: "radio4", value: "1", css: "radio-primary")
    Primary Radio Button

  = daisy_label(for: "radio5") do
    = daisy_radio(name: "radio_group2", id: "radio5", value: "2", css: "radio-secondary")
    Secondary Radio Button

  = daisy_label(for: "radio6") do
    = daisy_radio(name: "radio_group2", id: "radio6", value: "3", css: "radio-accent")
    Accent Radio Button

Join Radio Buttons with Button Style

Radio buttons can be grouped together using the join component with the with_radio slot. This creates a segmented control where the radio buttons appear as a single connected group of buttons.

Note

The with_radio slot automatically skips the radio class and adds the join-item and btn classes for a button-style appearance.

Preview
Code 
= daisy_join do |join|
  - join.with_radio(name: "join_options", id: "join_radio1", value: "1", html: { aria: { label: "Radio 1" } })
  - join.with_radio(name: "join_options", id: "join_radio2", value: "2", html: { aria: { label: "Radio 2" } })
  - join.with_radio(name: "join_options", id: "join_radio3", value: "3", html: { aria: { label: "Radio 3" } })

Radio Button States

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

Preview
Code 
.my-2.flex.flex-col.gap-4
  = daisy_label(for: "radio7") do
    = daisy_radio(name: "radio_group3", id: "radio7", value: "1")
    Standard Radio Button

  = daisy_label(for: "radio8") do
    = daisy_radio(name: "radio_group3", id: "radio8", value: "2", checked: true)
    Checked Radio Button

  = daisy_label(for: "radio9", css: "cursor-not-allowed") do
    = daisy_radio(name: "radio_group3", id: "radio9", value: "3", disabled: true)
    Disabled Radio Button

  = daisy_label(for: "radio10") do
    = daisy_radio(name: "radio_group3", id: "radio10", value: "4", required: true)
    Required Radio Button

Disabled Radio Button

Radio buttons can be disabled using the disabled attribute.

Preview
Code 
.my-2.flex.flex-col.gap-4
  = daisy_label(for: "radio11", css: "cursor-not-allowed") do
    = daisy_radio(name: "radio_group4", id: "radio11", value: "1", disabled: true)
    Disabled Radio Button

Custom ID

Radio buttons can be given a custom ID using the id attribute.

Preview
Code 
.my-2.flex.flex-col.gap-4
  = daisy_label(for: "custom-radio-id") do
    = daisy_radio(name: "radio_group5", id: "custom-radio-id", value: "1")
    Radio Button with Custom ID

Rails Form Example

The built-in Form Builder extension provides an even easier way to use radio buttons 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(:gender_male) do
      = form.daisy_radio(:gender, value: "male")
      Male

    = form.daisy_label(:gender_female) do
      = form.daisy_radio(:gender, value: "female")
      Female

    = form.daisy_label(:gender_other) do
      = form.daisy_radio(:gender, value: "other")
      Other

Using Label Component

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

Preview
Code 
.my-2.flex.flex-col.gap-4
  .flex.items-center.space-x-2
    = daisy_radio(name: "contact_preference", id: "email", value: "email")
    = daisy_label(for: "email", title: "Email")

  .flex.items-center.space-x-2.mt-4
    = daisy_radio(name: "contact_preference", id: "phone", value: "phone")
    = daisy_label(for: "phone", title: "Phone")

  .flex.items-center.space-x-2.mt-4
    = daisy_radio(name: "contact_preference", id: "mail", value: "mail")
    = daisy_label(for: "mail", title: "Mail")
Made with by Profoundry .
Copyright © 2023-2026 Profoundry LLC.
All rights reserved.
to select
to navigate
esc to close