Theme

Fieldset

form @dryui/ui Compound

Structured field grouping with legend, description, and content

formgrouplegendsettings

Start Here

Start from the smallest working snippet, then move to interactive examples and the full API contract below.

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 } 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'

Customize

Use the interactive examples to see common variants, states, and composition patterns before building your own.

Settings group

Notification preferences

Choose which updates reach your launch team.

svelte
<script lang="ts">
  import { Checkbox, Fieldset } from '@dryui/ui';
</script>

<Fieldset.Root>
  <Fieldset.Legend>Notification preferences</Fieldset.Legend>
  <Fieldset.Description>Choose which updates reach your launch team.</Fieldset.Description>
  <Fieldset.Content>
    <Checkbox checked={true}>Daily digest</Checkbox>
    <Checkbox>Pager escalation</Checkbox>
  </Fieldset.Content>
</Fieldset.Root>

Form grouping

Billing contact

Route invoices and compliance follow-up to one owner.

svelte
<script lang="ts">
  import { Field, Fieldset, Input, Label } from '@dryui/ui';
</script>

<Fieldset.Root>
  <Fieldset.Legend>Billing contact</Fieldset.Legend>
  <Fieldset.Description>Route invoices and compliance follow-up to one owner.</Fieldset.Description>
  <Fieldset.Content>
    <Field.Root>
      <Label>Name</Label>
      <Input placeholder="Name" />
    </Field.Root>
    <Field.Root>
      <Label>Email</Label>
      <Input type="email" placeholder="Email" />
    </Field.Root>
  </Fieldset.Content>
</Fieldset.Root>

Structure

Compound components always start with Fieldset.Root. Use this structure block to understand required wrappers before you wire state or styling.

Fieldset.Root
  Fieldset.Legend
  Fieldset.Description
  Fieldset.Content
Fieldset.Root Fieldset.LegendFieldset.DescriptionFieldset.Content

Compose

The full API contract lives here: props, CSS variables, and the public data attributes you can target when styling.

Compound component. Start with Fieldset.Root, then add only the parts you need.

Fieldset.LegendFieldset.DescriptionFieldset.Content

Fieldset.Root

Prop Type Default Required Bindable
children
Snippet
— ✓ —

Forwards native HTML attributes via rest props.

Fieldset.Legend

Prop Type Default Required Bindable
children
Snippet
— ✓ —

Forwards native HTML attributes via rest props.

Fieldset.Description

Prop Type Default Required Bindable
children
Snippet
— ✓ —

Forwards <p> attributes via rest props. Common examples: id, style, aria-describedby.

Fieldset.Content

Prop Type Default Required Bindable
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.