Composition recipe

Form

Compose forms from Field, FieldLabel, FieldDescription, FieldError, and the appropriate input. Keep validation in your form library or application state.

No standalone wrapper

This recipe intentionally stays in application code. Install only the primitives your implementation uses.

Building blocks

field input textarea checkbox radio-group

Starting point

function ProfileForm() {
  return (
    <form className="space-y-6">
      <Field>
        <FieldLabel htmlFor="name">Name</FieldLabel>
        <Input id="name" name="name" required />
        <FieldDescription>Shown on your public profile.</FieldDescription>
      </Field>
      <Button type="submit">Save</Button>
    </form>
  )
}