Form Field

Label + control + error/hint wiring for any input; includes Label.

FormField is the wiring component: a Label, your control, and inline feedback — error (in text-destructive) or hint (in text-muted-foreground), never both. This page also covers Label, which FormField uses internally.

Installation

import { FormField, Label } from "@iammikz/srui";

Usage

We'll never share your email.

FormField props

Prop	Type	Default	Description
`label`	`string`	—	Field label
`htmlFor`	`string`	—	Associates label + control (`id` on the control)
`error`	`string`	—	Error text; takes precedence over `hint`
`hint`	`string`	—	Helper text
`children`	`ReactNode`	—	The Input / Select / Textarea / … control

Label

Label wraps @radix-ui/react-label: htmlFor association, peer-disabled styling. Use it directly for controls that manage their own layout:

I agree to the terms

Examples

Error state

Username

That username is taken.

Accessibility

Label → control association via htmlFor/id gives every control an accessible name. The error message renders with role="alert" so it is announced when it appears; pair it with invalid on the control for aria-invalid.