88 lines
2.6 KiB
Markdown
88 lines
2.6 KiB
Markdown
# 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
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
### Login Form with Fieldset
|
|
|
|
```html
|
|
<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. |