Studio
2

Fieldset

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>

UseField for individual labels and errors. Use Field.Group when you need spacing without another named group. Native name, form, disabled, event handlers, attachments, and an element binding are forwarded by Root.

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 for a meaningful accessible name. Put grids and nested Field.Group parts inside Root to change the layout without changing the form’s submission behavior. The default uses spacing rather than a decorative card border.

API reference

Fieldset.Root

Prop Type Default
element Bindable HTMLFieldSetElement | undefined —

Fieldset.Description

Fieldset.Legend