offline docs

offline-docs/daisyui/fieldset.md

@@ -0,0 +1,88 @@
+# 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.