# Fieldset

Native form grouping with legends, descriptions, and disabled semantics.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add fieldset
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Description

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Legend

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| element | HTMLFieldSetElement \| undefined | - | No | Yes | Bindable reference to the DOM element. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { HTMLAttributes, HTMLFieldsetAttributes } from 'svelte/elements';
import Root from './fieldset.svelte';
import Description from './fieldset-description.svelte';
import Legend from './fieldset-legend.svelte';

export type FieldsetProps = HTMLFieldsetAttributes & { element?: HTMLFieldSetElement };
export type FieldsetLegendProps = HTMLAttributes<HTMLLegendElement>;
export type FieldsetDescriptionProps = HTMLAttributes<HTMLParagraphElement>;

export { Description, Legend, Root };
~~~~

## Examples

### Disabled

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

    let locked = $state(true);
</script>

<div class="flex w-full max-w-sm flex-col gap-6">
    <Fieldset.Root disabled={locked} class="disabled:opacity-[var(--opacity-disabled)]">
        <Fieldset.Legend>Billing contact</Fieldset.Legend>
        <Field.Root>
            <Field.Label>Invoice email</Field.Label>
            <Field.Control>
                {#snippet children(control)}
                    <Input
                        {...control}
                        type="email"
                        name="invoiceEmail"
                        value="billing@company.com"
                    />
                {/snippet}
            </Field.Control>
        </Field.Root>
    </Fieldset.Root>
    <Button
        class="w-fit"
        variant="outline"
        onclick={() => {
            locked = !locked;
        }}
    >
        {locked ? 'Edit billing contact' : 'Lock billing contact'}
    </Button>
</div>
~~~~

### Hero

~~~~svelte
<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>
~~~~

For the rendered reference, visit [/docs/components/fieldset](/docs/components/fieldset).