Fieldset
A group of related form fields with a common label.
<script lang="ts">
import { Field, FieldDescription, FieldLabel, Fieldset, FieldsetLegend, Input } from "coss-svelte";
</script>
<Fieldset class="flex w-full flex-col gap-6">
<FieldsetLegend>Billing Details</FieldsetLegend>
<Field>
<FieldLabel>Company</FieldLabel>
<Input placeholder="Enter company name" type="text" />
<FieldDescription>The name that will appear on invoices.</FieldDescription>
</Field>
<Field>
<FieldLabel>Tax ID</FieldLabel>
<Input placeholder="Enter tax identification number" type="text" />
<FieldDescription>Your business tax identification number.</FieldDescription>
</Field>
</Fieldset>
Installation
Install the component package, shared coss-svelte theme, and Bits UI peer.
npm install coss-svelte @coss-svelte/theme bits-uiUsage
Import the Svelte component exports directly from the package.
import { Fieldset, FieldsetLegend } from "coss-svelte";Anatomy
- Fieldset
- FieldsetLegend
API Reference
Fieldset
A group of related form fields with a common label.
| Prop | Type | Default | Description |
|---|---|---|---|
legend | string | "" | Legend text rendered by the fieldset fallback layout. |
description | string | "" | Supporting text rendered by the component's built-in fallback layout. |
children : Snippet<[]>Inherits from Svelte <fieldset> attributes.
FieldsetLegend
Names the grouped controls inside a fieldset.
children : Snippet<[]>Inherits from Svelte component attributes.
Implementation Details
- Status
- Stable
- Foundation
- native
- Category
- Forms & Validation
- Particles
- 1