Fieldset
Fieldset is a container for grouping related form elements. It includes fieldset-legend as a title and fieldset-label as a description.
| Class name | Type | |
|---|---|---|
| fieldset | Component | for the fieldset container |
| fieldset-legend | Part | for the title of the fieldset |
| fieldset-label | Part | for the description of the fieldset |
<fieldset class="$$fieldset"> <legend class="$$fieldset-legend">Page title</legend> <input type="text" class="$$input" placeholder="My awesome page" /> <p class="$$fieldset-label">You can edit page title later on from settings</p> </fieldset>
<fieldset class="$$fieldset">
<legend class="$$fieldset-legend">Page title</legend>
<input type="text" class="$$input" placeholder="My awesome page" />
<p class="$$fieldset-label">You can edit page title later on from settings</p>
</fieldset>
<fieldset class="$$fieldset">
<legend class="$$fieldset-legend">Page title</legend>
<input type="text" class="$$input" placeholder="My awesome page" />
<p class="$$fieldset-label">You can edit page title later on from settings</p>
</fieldset>
<fieldset class="$$fieldset">
<legend class="$$fieldset-legend">Page title</legend>
<input type="text" class="$$input" placeholder="My awesome page" />
<p class="$$fieldset-label">You can edit page title later on from settings</p>
</fieldset><fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box"> <legend class="$$fieldset-legend">Page title</legend> <input type="text" class="$$input" placeholder="My awesome page" /> <p class="$$fieldset-label">You can edit page title later on from settings</p> </fieldset>
<fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
<legend class="$$fieldset-legend">Page title</legend>
<input type="text" class="$$input" placeholder="My awesome page" />
<p class="$$fieldset-label">You can edit page title later on from settings</p>
</fieldset>
<fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
<legend class="$$fieldset-legend">Page title</legend>
<input type="text" class="$$input" placeholder="My awesome page" />
<p class="$$fieldset-label">You can edit page title later on from settings</p>
</fieldset>
<fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
<legend class="$$fieldset-legend">Page title</legend>
<input type="text" class="$$input" placeholder="My awesome page" />
<p class="$$fieldset-label">You can edit page title later on from settings</p>
</fieldset><fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box"> <legend class="$$fieldset-legend">Page details</legend> <label class="$$fieldset-label">Title</label> <input type="text" class="$$input" placeholder="My awesome page" /> <label class="$$fieldset-label">Slug</label> <input type="text" class="$$input" placeholder="my-awesome-page" /> <label class="$$fieldset-label">Author</label> <input type="text" class="$$input" placeholder="Name" /> </fieldset>
<fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
<legend class="$$fieldset-legend">Page details</legend>
<label class="$$fieldset-label">Title</label>
<input type="text" class="$$input" placeholder="My awesome page" />
<label class="$$fieldset-label">Slug</label>
<input type="text" class="$$input" placeholder="my-awesome-page" />
<label class="$$fieldset-label">Author</label>
<input type="text" class="$$input" placeholder="Name" />
</fieldset>
<fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
<legend class="$$fieldset-legend">Page details</legend>
<label class="$$fieldset-label">Title</label>
<input type="text" class="$$input" placeholder="My awesome page" />
<label class="$$fieldset-label">Slug</label>
<input type="text" class="$$input" placeholder="my-awesome-page" />
<label class="$$fieldset-label">Author</label>
<input type="text" class="$$input" placeholder="Name" />
</fieldset>
<fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
<legend class="$$fieldset-legend">Page details</legend>
<label class="$$fieldset-label">Title</label>
<input type="text" class="$$input" placeholder="My awesome page" />
<label class="$$fieldset-label">Slug</label>
<input type="text" class="$$input" placeholder="my-awesome-page" />
<label class="$$fieldset-label">Author</label>
<input type="text" class="$$input" placeholder="Name" />
</fieldset><fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box"> <legend class="$$fieldset-legend">Login</legend> <label class="$$fieldset-label">Email</label> <input type="email" class="$$input" placeholder="Email" /> <label class="$$fieldset-label">Password</label> <input type="password" class="$$input" placeholder="Password" /> <button class="$$btn $$btn-neutral mt-4">Login</button> </fieldset>
<fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
<legend class="$$fieldset-legend">Login</legend>
<label class="$$fieldset-label">Email</label>
<input type="email" class="$$input" placeholder="Email" />
<label class="$$fieldset-label">Password</label>
<input type="password" class="$$input" placeholder="Password" />
<button class="$$btn $$btn-neutral mt-4">Login</button>
</fieldset>
<fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
<legend class="$$fieldset-legend">Login</legend>
<label class="$$fieldset-label">Email</label>
<input type="email" class="$$input" placeholder="Email" />
<label class="$$fieldset-label">Password</label>
<input type="password" class="$$input" placeholder="Password" />
<button class="$$btn $$btn-neutral mt-4">Login</button>
</fieldset>
<fieldset class="$$fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box">
<legend class="$$fieldset-legend">Login</legend>
<label class="$$fieldset-label">Email</label>
<input type="email" class="$$input" placeholder="Email" />
<label class="$$fieldset-label">Password</label>
<input type="password" class="$$input" placeholder="Password" />
<button class="$$btn $$btn-neutral mt-4">Login</button>
</fieldset>Do you have a question? Ask on GitHub or Discord server
Do you see a bug? open an issue on GitHub
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
