mielui
Forms

Fieldset

Give related fields one clear name and a shared boundary.

Installation

pnpm dlx @mielui/svelte add fieldset field input

Usage

Root is a native fieldset and Legend is its native legend. Keep Legend first so it names the group. Description is optional prose; give it an ID and pass that ID through Root’s aria-describedby when it explains the whole group.

<script lang="ts">
    import * as Field from '@mielui/svelte/components/field';
    import * as Fieldset from '@mielui/svelte/components/fieldset';
    import { Input } from '@mielui/svelte/components/input';

    const uid = $props.id();
</script>

<Fieldset.Root aria-describedby={`${uid}-details`} class="w-full max-w-sm">
    <Fieldset.Legend>Contact details</Fieldset.Legend>
    <Fieldset.Description id={`${uid}-details`}>
        How we can reach you about your workspace.
    </Fieldset.Description>
    <Field.Group>
        <Field.Root required>
            <Field.Label>Full name</Field.Label>
            <Field.Control>
                {#snippet children(control)}
                    <Input {...control} name="name" autocomplete="name" placeholder="Sam Rivera" />
                {/snippet}
            </Field.Control>
        </Field.Root>
        <Field.Root required>
            <Field.Label>Email address</Field.Label>
            <Field.Control>
                {#snippet children(control)}
                    <Input
                        {...control}
                        type="email"
                        name="email"
                        autocomplete="email"
                        placeholder="sam@company.com"
                    />
                {/snippet}
            </Field.Control>
        </Field.Root>
    </Field.Group>
</Fieldset.Root>

Use Field for individual labels and errors. Use Field.Group when you need spacing without another named group. Root accepts every native fieldset attribute, such as name, form, and disabled, and supports bind:element.

Disable a group

A disabled fieldset disables its native descendant controls and excludes their values from submission. Controls inside its first legend are exempt under native HTML rules. Keep an external “Edit” action outside the fieldset if it must remain available.

Compose the group

Legend and Description are independent parts. Omit Description for a self-explanatory group; keep Legend, or an aria-label on Root, so the group has a name. Put grids and nested Field.Group parts inside Root to change the layout without changing what the form submits. Root has no border; it separates groups with spacing.

API reference

Fieldset.Root

  • element Bindable
    HTMLFieldSetElement

    Bindable reference to the DOM element.

Other parts

These parts have no props of their own. They pass HTML attributes and events to their element.

  • Fieldset.Description
  • Fieldset.Legend