Hextech UI

Field

Live example

Field

Visible to your party.

Installation

Terminal
npx shadcn@latest add https://hextech-ui.vercel.app/r/field.json

API reference

These are the main Field options. See the exported TypeScript types for inherited native or primitive props.

PropTypeDefault
labelstring (TextField required)—
description / errorstring (TextField)—
name / invalidBase UI field props—
orientationvertical | horizontal | responsivevertical

Validation and forms

Use FieldLabel, FieldDescription and FieldError inside Field so labels and messages remain associated with the control. Set invalid for an external validation error. The default label-to-control gap is 8px.

See Forms for a complete React Hook Form and Zod example with submission, reset and server errors.

Empty State

An empty collection message with optional recovery actions.

Fieldset

A semantic group of related controls with a shared legend.