Foundation

Field

Labeled form-field wrapper. Auto-generates an id and exposes ARIA wiring (id, aria-describedby, aria-invalid) via the children snippet.

Examples

With description

We'll only use this for password resets.

<Field
  label="Email"
  description="We'll only use this for password resets."
  required
>
  {#snippet children({id, describedBy})}
    <Input {id} type="email" placeholder="[email protected]" aria-describedby={describedBy} />
  {/snippet}
</Field>

With error

Username

That username is already taken.

<Field label="Username" error="That username is already taken.">
  {#snippet children({id, describedBy, invalid})}
    <Input {id} value="taken-name" aria-describedby={describedBy} aria-invalid={invalid || undefined} />
  {/snippet}
</Field>

With Textarea

Bio

Markdown supported. 280 char max.

<Field label="Bio" description="Markdown supported. 280 char max.">
  {#snippet children({id, describedBy})}
    <Textarea {id} placeholder="Tell us about yourself" aria-describedby={describedBy} />
  {/snippet}
</Field>

Props

Prop	Type	Default	Description
`label`	`string`	`—`	Renders a Label above the control linked by id.
`description`	`string`	`—`	Helper text below the control. Hidden when error is set.
`error`	`string`	`—`	Error message; flips invalid state and replaces description.
`required`	`boolean`	`false`	Adds a required marker on the label.
`id`	`string`	`—`	Override auto-generated id (default: uin-field-N counter).
`children`	`Snippet<[{id, describedBy, invalid}]>`	`—`	Receives wiring args; pass them to the control.

Install

CLI

npx @a3tai/mittsu add field