Form Field — cinder playground

Overview

Wraps an input, label, and helper or error text into a cohesive accessible field unit.

<script lang="ts">
  import FormField from '@lostgradient/cinder/form-field';
</script>

<FormField />

Live preview

Use when

Composing a one-off field where the input does not own its own label rendering.
Forwarding shared required, disabled, and error state to an opted-in child control.

Avoid when

Grouping multiple related controls under one heading — use form-section instead.

A form field wrapping an input with label association.

Input inside FormField inherits aria-describedby and aria-invalid from context.

Error state wires aria-invalid and aria-describedby on the wrapped control.

Props for form-field
Name	Type	Default	Required	Description
`id`	`text`		req	Required stable id — used for `<label for>`, description, error, and the child control's id via context.
`label`	`text`		req	Visible label text. Required — the primitive's whole purpose is label association.
`description`	`text`			Helper text rendered below the control; wired into `aria-describedby`.
`error`	`text`			Validation error; sets `aria-invalid="true"` on opted-in controls via context.
`required`	`boolean`	`false`		Renders a visual required marker and exposes `required: true` on the context.
`disabled`	`boolean`	`false`		Propagated to opted-in controls via context. Does not style FormField itself.
`children`	`snippet`		req	Control(s) rendered inside the field.