Field

Form field wrapper with automatic label association, description, and validation error display. Built on Base UI Field. Works without react-hook-form.

Preview

Email address

We will only use this to send you important updates.

Installation

bash

npx shadcn@latest add @layout/field

Usage

tsx

import { Field, FieldLabel, FieldDescription, FieldError } from "@/components/ui/field"

Examples

With validation

Username

Letters, numbers and hyphens only.

With checkbox

I agree to the terms of service

By checking this you accept our privacy policy.

Disabled

Organisation name

Contact support to change your organisation name.

Guidelines for AI agents

Wrap any field control in Field. FieldLabel auto-associates with the control via Field.Root context — no htmlFor needed unless the control is outside Field. FieldError renders only when the field is invalid. Pass a validate function to Field for custom rules.

Never

Neveruse plain <label> inside Field — always use FieldLabel for correct association
Neverhardcode error colours; they derive from --layout-danger
Neverskip FieldError when using the validate prop
Nevernest Field components

Tokens consumed

--layout-fg--layout-muted-fg--layout-danger--layout-duration-base