Field chrome

Every field-shaped component renders its own label (above), an optional right-aligned aside in the label row, and error + description rows below — via one shared FieldChrome. This page shows the concept + cross-component alignment on Input; each control's own demo has a #field-chrome section. Spec: src/lib/components/FieldChrome.spec.md.

Input #field-chrome Select #field-chrome TextArea #field-chrome Checkbox #field-chrome Toggle #field-chrome

Label + description

Plan name

Displayed on the pricing page and receipts.

import { Input } from '@spaethtech/svelte-ui';

let name = $state('');

<Input
  label="Plan name"
  description="Displayed on the pricing page and receipts."
  bind:value={name}
/>

Label `aside`

A right-aligned snippet in the label row — a char count, status, link, or button.

Bio

0/40

A short tagline.

<Input label="Bio" bind:value={bio} maxlength={40} description="A short tagline.">
  {#snippet aside()}
    <span>{bio.length}/40</span>
  {/snippet}
</Input>

Controlled `error`

Sets the inline error row + error border + aria-invalid. The description stays visible beneath it.

Slug

That slug is already taken.

Lowercase, hyphens only.

<Input
  label="Slug"
  bind:value={slug}
  description="Lowercase, hyphens only."
  error={slugTaken ? 'That slug is already taken.' : null}
/>

Required + `validate` (native tooltip)

required adds the * + aria-required. validate keeps its native-tooltip channel — which fires on submit (or reportValidity()), so it lives in a <form>. Submit it empty (native required) or with 1–2 characters (the validate message) to see the browser bubble; the error border is shared with the inline-error path.

<form onsubmit={handleSubmit}>
  <Input
    label="Username"
    required
    bind:value={username}
    validate={(v) => v.length >= 3 || 'At least 3 characters.'}
    description="Public handle."
  />
  <Button type="submit" text="Submit" />
</form>

Aligned row

Label-above + size-driven control height means a row of mixed controls lines up pixel-perfect — Input, Select, Toggle, and Checkbox all share the same label row + control baseline.

Full name

Role

Notifications

Agree to terms

<div class="grid grid-cols-4 gap-4 items-start">
  <Input label="Full name" bind:value={name} />
  <Select label="Role" {options} bind:value={role} />
  <Toggle label="Notifications" bind:checked={notify} />
  <Checkbox label="Agree to terms" bind:checked={agree} required />
</div>

Field background

On a non-white surface, non-ghost fields now fill with --ui-color-background (they read as fields); ghost stays transparent.

Default (filled)

Ghost (transparent)

Groups — `FieldGroup`

One wrapper for a set of Radios, Checkboxes, or Toggles under a shared legend. Items render their label inline (right of the control). For radios, bind the group's value — children need no bind:group. Checkboxes/toggles stay independent.

Selected method: email · caps: webhook

<FieldGroup label="Delivery method" bind:value={method} name="method">
  <Radio value="email" label="Email" />
  <Radio value="sms" label="SMS" />
  <Radio value="push" label="Push notification" />
</FieldGroup>

<FieldGroup label="Capabilities" columns={2}>
  <Checkbox label="Webhook triggers" bind:checked={caps.webhook} />
  <Checkbox label="Script actions" bind:checked={caps.script} />
</FieldGroup>

Field chrome

Label + description

Label aside

Controlled error