Form field

Pass the label, and hint and error when you have them, and render the control in the control snippet by spreading the attributes it receives: id, aria-describedby, aria-invalid, required and the field's control class. The field wires the ids and styles the control; it does not validate values, decide when to show an error, move focus, keep form state, trim text to the count's limit, or group radios and checkboxes (use a fieldset for those).

Suggested location

src/lib/components/form-field-01

Required props

labelcontrol

Limitations

• The field shows the error you pass; it never validates. Set error after your own validation, usually on submit, and pair it with an error summary at the top of the form.
• The control styling applies only when you spread attributes.class onto a native input, select or textarea. Leave it off, or merge your own classes with it, to style the control yourself.
• The drawn chevron applies to single, unsized selects; multiple and sized selects keep the platform's appearance.
• The count counts what you pass as count.value (rounded to a whole, non-negative number); it does not read the control. Characters beyond the limit are allowed and shown as too many, never trimmed.
• The count's announcement needs the browser; without JavaScript the visible count and the limit still render.
• The error rule hangs 12 px into the start gutter, so a container with overflow hidden needs at least that much padding.
• Not for groups of radios or checkboxes; those need a fieldset and legend.

Example

<script lang="ts">
	import FormField from '$lib/components/form-field-01/FormField.svelte';

	let email = $state('');
	let error = $state<string>();

	function submit(event: SubmitEvent) {
		error = email.includes('@')
			? undefined
			: 'Enter an email address in the correct format, like name@example.com';
		if (error) event.preventDefault();
	}
</script>

<form method="post" novalidate onsubmit={submit} class="grid max-w-md gap-6">
	<FormField label="Email address" hint="We send your sign-in link here." {error} required>
		{#snippet control(attributes)}
			<input {...attributes} type="email" name="email" autocomplete="email" bind:value={email} />
		{/snippet}
	</FormField>
	<button type="submit">Send sign-in link</button>
</form>

<FormField label="Due date" hint="For example, 14 11 2026" {error} required>
	{#snippet control(attributes)}
		<input {...attributes} name="due" inputmode="numeric" bind:value={due} />
	{/snippet}
</FormField>

<input {...attributes} class="{attributes.class} max-w-40" />

countMessages={{
	limit: (max) => `Vous pouvez saisir jusqu'à ${max} caractères`,
	remaining: (n) => `Il vous reste ${n} caractères`,
	over: (n) => `Vous avez ${n} caractères en trop`
}}

.band {
	background: #09090b;
	--form-field-accent: #fafafa;
	--form-field-ink: #fafafa;
	--form-field-muted: #a1a1aa;
	--form-field-border: rgb(255 255 255 / 0.4);
	--form-field-hairline: rgb(255 255 255 / 0.1);
	--form-field-surface: #18181b;
	--form-field-error: #f87171;
	--form-field-color-scheme: dark;
}

Change the words through props and retone the field through eight --form-field-* CSS variables. Hover edges, the placeholder and the disabled fill are mixed from those, so they follow any retone.

• Markers: GOV.UK recommends marking optional fields and leaving required ones unmarked. For that, set requiredLabel='' on every required field and optionalLabel='(optional)' on the optional ones. Keep markers in words; an asterisk alone is not read reliably.
• Hints and errors: a hint gives the format or a constraint ('For example, 27 3 1985'), never the label again. An error says what to do ('Enter a date in the past'), not 'Invalid input'.
• Width: the control fills the field. Set the width on the field with class, or on the control by merging classes: <input {...attributes} class="{attributes.class} max-w-40" /> for a date or a postcode.
• Ids: pass id when your own code needs the control's id. The hint, error and limit ids are that id plus -hint, -error and -limit, so keep every id you pass unique on the page. An empty id is treated as none.
• Your own control: spread every attribute except class onto a custom component that forwards them to its input, and style it yourself.
• Accent: --form-field-accent colours the two-pixel focus ring. Keep it 3:1 against the page.
• Error: --form-field-error colours the message, the edge, the rule and a count over its limit. The default is red-700 (6.5:1 on white). On a dark fill use a lighter red such as #f87171.
• Neutrals: --form-field-ink is the label and value, --form-field-muted the hint, marker and count, --form-field-border the control's edge (keep it 3:1), --form-field-hairline the disabled edge, --form-field-surface the control fill.
• Worked retone for a #09090b band: --form-field-accent: #fafafa; --form-field-ink: #fafafa; --form-field-muted: #a1a1aa; --form-field-border: rgb(255 255 255 / 0.4); --form-field-hairline: rgb(255 255 255 / 0.1); --form-field-surface: #18181b; --form-field-error: #f87171; --form-field-color-scheme: dark.
• Density: size='compact' for settings panels and tables; the default for sign-up, booking and checkout forms. Space fields 24 px apart (gap-6) so each hint groups with its own control.

Public CSS variables

• The label is a native <label for> the control's id, so clicking it focuses the control and it is the control's accessible name, marker included. With labelHidden it is visually hidden, not removed.
• aria-describedby lists the hint, then the error, then the count's limit sentence, and only those that render; with none, the attribute is absent.
• aria-invalid='true' is set only while error is present; it is never set to 'false'.
• The error is read with the control through aria-describedby and is not a live region, so it is not announced twice. Announce errors on submit with an error summary that links to each field, and move focus there yourself.
• The error carries a visually hidden prefix ('Error:', translate it with errorPrefix), a warning mark, a two-pixel control edge and a rule beside the field, so it never depends on colour.
• The limit sentence is read once with the control, the current count is ordinary text under it, and a polite status repeats the count one second after the value stops changing (cleared first, so the same sentence can be announced again). Nothing is announced on load.
• Disabled and read-only are set on the control by you; the field styles them. Explain in the hint why a disabled value can't change.
• Focus shows a two-pixel ring in the accent, two pixels outside the control's radius. Controls are at least 44 px tall on coarse pointers, and their text is 16 px below the sm breakpoint so iOS does not zoom. In forced-colours mode the edge becomes a real system-colour border.

Integration

• Local interaction
• Works without client-side JavaScript
• Server-side rendering supported

Dependencies

No additional runtime packages beyond Svelte and Tailwind CSS

License

MIT. Default license approval is pending; see the license status before adopting the source.

Version history

• 1.0.0 (Published) Current release · 30 September 2026

Only the current release is available. Keep downloaded source and its receipt if you need to use it again later.