Fieldsets

Fieldset with Legend (Slot)

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

Settings (Slot) Enable Notifications Enable Dark Mode

= 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")

Fieldset with Caption (Argument)

Pass caption: to add caption / helper text below the controls. It renders DaisyUI's .fieldset-label, which — unlike .label (daisy_label) — is not nowrap, so long help text wraps instead of overflowing the form.

Preview

Display Name

This is shown publicly on your profile and in comments.

Code

= daisy_fieldset(legend: "Display Name", caption: "This is shown publicly on your profile and in comments.", css: "w-80") do
  = daisy_input(placeholder: "Ada Lovelace")

Fieldset Caption with an Inline Link

.fieldset-label is display: flex, which splits a sentence and an inline link into separate flex items. For prose that contains a link, use the caption slot and pass css: "block" so the link flows inside the sentence.

Preview

Theme

Pick the palette used for new charts. Manage your saved themes on the Themes page.

Code

= daisy_fieldset(legend: "Theme", css: "w-80") do |fieldset|
  = daisy_select(options: ["Light", "Dark", "System"], placeholder: "Select a theme")
  - fieldset.with_caption(css: "block") do
    Pick the palette used for new charts. Manage your saved themes on the
    = daisy_link("Themes", href: "#")
    page.

Basic Fieldset (No Legend)

Fieldset with Legend (Argument)

Fieldset with Legend (Slot)

Fieldset with Various Inputs

Fieldset with Custom Styling

Fieldset with Caption (Argument)

Fieldset Caption with an Inline Link

Docs

Guides

Hero

Daisy