daisyUI Documentation - Fieldset Component

Fieldset is a container for grouping related form elements. It includes fieldset-legend as a title and label as a description.

Classes and Usage

Core Classes:

fieldset - The main fieldset container
fieldset-legend - The title of the fieldset
label - Label for inputs (used for descriptions)

Examples

Basic Fieldset with Legend and Label

<fieldset class="fieldset">
  <legend class="fieldset-legend">Page title</legend>
  <input type="text" class="input" placeholder="My awesome page" />
  <p class="label">You can edit page title later on from settings</p>
</fieldset>

Fieldset with Background and Border

<fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4">
  <legend class="fieldset-legend">Page title</legend>
  <input type="text" class="input" placeholder="My awesome page" />
  <p class="label">You can edit page title later on from settings</p>
</fieldset>

Fieldset with Multiple Inputs

<fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4">
  <legend class="fieldset-legend">Page details</legend>

  <label class="label">Title</label>
  <input type="text" class="input" placeholder="My awesome page" />

  <label class="label">Slug</label>
  <input type="text" class="input" placeholder="my-awesome-page" />

  <label class="label">Author</label>
  <input type="text" class="input" placeholder="Name" />
</fieldset>

Fieldset with Join Items

<fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4">
  <legend class="fieldset-legend">Settings</legend>
  <div class="join">
    <input type="text" class="input join-item" placeholder="Product name" />
    <button class="btn join-item">save</button>
  </div>
</fieldset>

<fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4">
  <legend class="fieldset-legend">Login</legend>

  <label class="label">Email</label>
  <input type="email" class="input" placeholder="Email" />

  <label class="label">Password</label>
  <input type="password" class="input" placeholder="Password" />

  <button class="btn btn-neutral mt-4">Login</button>
</fieldset>

Features

Groups related form elements together
Provides semantic structure for forms
Uses fieldset-legend as the title
Can include descriptive labels
Works well with other daisyUI components like inputs and buttons
Customizable with Tailwind classes

This component is useful for organizing form elements into logical groups, improving accessibility and user experience in complex forms.

2.6 KiB Raw Blame History