Fieldset
Structured field grouping with legend, description, and content
Accessibility
- Pair the control with a visible label or aria-label and keep helper or error text programmatically associated.
- Provide native name, autocomplete, and value wiring when the component participates in form submission.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
svelte
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { Fieldset, Checkbox } from '@dryui/ui';
</script>
<Fieldset.Root>
<Fieldset.Legend>Notification preferences</Fieldset.Legend>
<Fieldset.Description>Choose how release updates reach your team.</Fieldset.Description>
<Fieldset.Content>
<Checkbox checked={true}>Email digests</Checkbox>
<Checkbox>SMS alerts</Checkbox>
</Fieldset.Content>
</Fieldset.Root>Import options
Root package
ts
import { Fieldset } from '@dryui/ui'Per-component subpath
ts
import { Fieldset } from '@dryui/ui/fieldset'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
Fieldset.Root | |||||
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
Fieldset.Legend | |||||
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
Fieldset.Description | |||||
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
Fieldset.Content | |||||
| children | Snippet | Content rendered inside the component. | — | ✓ | — |