Field

A form field component that provides structure for labels, controls, descriptions, and error messages. Handles validation and accessibility automatically.

View Source

#Installation

npx @dinachi/cli@latest add field

#Usage

tsx

import { Field, FieldLabel, FieldControl, FieldDescription, FieldError, FieldValidity } from '@/components/ui/field'

#Examples

Default Field

A basic field with label, control, and description

We'll never share your email.

Field with Validation

Interactive field with real-time validation feedback

Username

Must be at least 3 characters.

Field with Error

Field displaying an error state

Password

Required Field

Fields marked as required with visual indicators

Full Name *

Your legal name as it appears on documents.

Phone Number *

We'll use this for account recovery.

Disabled Field

Field in a disabled state

Account ID

This field cannot be modified.

#API Reference

Prop	Type	Default	Description
name	string	—	The name of the field (required)
disabled	boolean	false	Whether the field is disabled
invalid	boolean	false	Whether the field is in an invalid state
required	boolean	false	Whether the field is required
validate	(value: any) => string \| undefined	—	Custom validation function that returns an error message or undefined