Fieldsets group related form controls and can optionally include a legend.
A simple fieldset rendered without a legend.
= daisy_fieldset do
= daisy_toggle(trailing: "Enable Feature X")
Pass simple text for the legend directly using the legend: argument.
= daisy_fieldset(legend: "Settings (Argument)") do
= daisy_toggle(trailing: "Enable Feature X")
Use the with_legend slot to provide custom content for the legend,
including HTML.
= daisy_fieldset do |fieldset|
- fieldset.with_legend { "Settings (Slot)" }
= daisy_toggle(trailing: "Enable Notifications")
= daisy_toggle(trailing: "Enable Dark Mode")
Fieldsets are useful for grouping related form inputs under a common legend.
= 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"])
You can customize the Fieldset with standard css options to make it look
exactly like you want.
= 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")
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.
= 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-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.
= 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.
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.