Field

A suite of components for building accessible form fields with labels, descriptions, and error states.

Installation

$ npx shadcn@latest add "/r/field.json"

Usage

Username

This is your public display name.

With Error

Username

Props

Field

Prop	Type	Default	Description
children	`React.ReactNode`	-	The content of the field.
className	`string`	-	Additional CSS classes.

FieldLabel

Prop	Type	Default	Description
children	`React.ReactNode`	-	The label text.
className	`string`	-	Additional CSS classes.

FieldControl

Note: FieldControl is used with the render prop pattern for custom inputs. For simple cases, you can place the Input directly inside Field.

Prop	Type	Default	Description
render	`(props) => React.ReactNode`	-	Render function for custom input.
className	`string`	-	Additional CSS classes.

FieldDescription

Prop	Type	Default	Description
children	`React.ReactNode`	-	The description text.
className	`string`	-	Additional CSS classes.

FieldError

Prop	Type	Default	Description
children	`React.ReactNode`	-	The error message text.
className	`string`	-	Additional CSS classes.