FormField

Wrapper that adds a label, description or error text, and a required indicator around any input component. Provide the same explicit id on both FormField and the control so the label’s for/id wiring matches the focusable input.

import { FormField, TextInput } from 'phoundry-ui';

Basic with Label

Username

Show code

<FormField label="Username" id="username">
  <TextInput id="username" value={name} oninput={(v) => name = v} placeholder="Enter username" />
</FormField>

With Description

We'll never share your email.

Show code

<FormField label="Email" id="email" description="We'll never share your email.">
  <TextInput id="email" value={email} oninput={(v) => email = v} placeholder="[email protected]" />
</FormField>

With Error

Password

Password must be at least 8 characters.

Show code

<FormField label="Password" id="password" error="Password must be at least 8 characters.">
  <TextInput id="password" type="password" value={pw} oninput={(v) => pw = v} placeholder="Enter password" />
</FormField>

Required

Full Name *

Show code

<FormField label="Full Name" id="fullname" required>
  <TextInput id="fullname" value={name} oninput={(v) => name = v} placeholder="Jane Doe" />
</FormField>

Snippet label

API Key (scoped)

Rich labels still associate correctly when ids match.

Show code

{#snippet labelSnippet()}
  API Key <span class="text-semantic-error">*</span>
{/snippet}

<FormField label={labelSnippet} id="apikey" description="Stored encrypted at rest.">
  <TextInput id="apikey" value={key} oninput={(v) => (key = v)} />
</FormField>

Props

Prop	Type	Default	Description
label	string \| Snippet	—	Field label text or custom snippet.
description	string	—	Helper text shown below the input.
error	string	—	Error message — replaces description when present.
required	boolean	false	Shows a red asterisk next to the label.
disabled	boolean	false	Dims the entire field and prevents interaction.
id	string	—	HTML id for the label’s `for` attribute. Auto-generated if omitted.
class	string	—	Additional CSS classes on the wrapper.
children required	Snippet	—	The input element to wrap.

Usage tips

The error prop takes priority over description — only one displays at a time.
When you omit id, FormField still generates one for the label — mirror it on your input via bind:element patterns or pass an explicit shared id as shown above.
Pass a Snippet for label when you need custom markup (e.g. an icon next to the label text).
Wrap any input component — TextInput, Select, Textarea, etc.