Fieldsets

Fieldsets group related form controls and can optionally include a legend.

Basic Fieldset (No Legend)

A simple fieldset rendered without a legend.

Enable Feature X

= daisy_fieldset do
  = daisy_toggle(end: "Enable Feature X")

Fieldset with Legend (Argument)

Pass simple text for the legend directly using the legend: argument.

Preview

Settings (Argument) Enable Feature X

Code

= daisy_fieldset(legend: "Settings (Argument)") do
  = daisy_toggle(end: "Enable Feature X")

Fieldset with Legend (Slot)

Use the with_legend slot to provide custom content for the legend, including HTML.

Preview

Settings (Slot) Enable Notifications Enable Dark Mode

Code

= daisy_fieldset do |fieldset|
  - fieldset.with_legend { "Settings (Slot)" }

  = daisy_toggle(end: "Enable Notifications")
  = daisy_toggle(end: "Enable Dark Mode")

Fieldset with Various Inputs

Fieldsets are useful for grouping related form inputs under a common legend.

Preview

User Profile

Name Country

Code

= daisy_fieldset(legend: "User Profile") do
  .mt-4.space-y-4
    = daisy_input(floating: "Name")
    = daisy_text_area(placeholder: "Bio", rows: 3) # Text areas don't currently support floating labels
    = daisy_select(floating: "Country", options: ["USA", "Canada", "Mexico"])

Fieldset with Custom Styling

You can customize the Fieldset with standard css options to make it look exactly like you want.

Preview

Advanced Options API Key

Code

= daisy_fieldset(css: "p-4 border rounded bg-base-200 w-80") do |fieldset|
  - fieldset.with_legend(css: "border rounded bg-base-100 px-4") { "Advanced Options" }

  = daisy_label("API Key")
  = daisy_input(placeholder: "asdf1234")
  = daisy_button("Save Settings", css: "mt-4")

Made with by Profoundry .

Fieldsets

Basic Fieldset (No Legend)

Fieldset with Legend (Argument)

Fieldset with Legend (Slot)

Fieldset with Various Inputs

Fieldset with Custom Styling

Docs

Guides

Hero

Daisy