Binhlaig UI Component

Form

Accessible layout primitives for labels, controls, helper text, validation messages, sections and actions.

Installation

Initialize Binhlaig UI and install Form using your preferred installer.

Initialize first

npx binhlaig-ui@latest init

Terminal

npx binhlaig-ui@latest add form

Import

Import the Form layout primitives from your UI directory.

import {
  Form,
  FormActions,
  FormControl,
  FormDescription,
  FormField,
  FormLabel,
  FormMessage,
  FormSection,
  FormSectionDescription,
  FormSectionHeader,
  FormSectionTitle,
} from "@/components/ui/form"

Usage

Build a basic form using field, label, control and action primitives.

Validation

Use FormDescription and FormMessage to communicate field state.

Form Sections

Group related fields in a bordered section.

Checkbox and Select

Form primitives work with native controls and custom UI components.

React Hook Form

Connect Binhlaig Form layout primitives to React Hook Form for typed values, validation errors and submission state.

Install React Hook Form

npm install react-hook-form

Submit State

Disable the submit action and show progress while saving.

Update or Overwrite

Replace an older Form source with the latest registry version.

npx binhlaig-ui@latest add form --overwrite

API Reference

Components included in the Binhlaig UI Form layout.

Component	Purpose
`Form`	Root form layout.
`FormField`	Groups a single field.
`FormLabel`	Accessible field label.
`FormControl`	Wraps an input control.
`FormDescription`	Displays helper text.
`FormMessage`	Displays validation feedback.
`FormSection`	Groups related fields.
`FormSectionHeader`	Groups section heading text.
`FormSectionTitle`	Section heading.
`FormSectionDescription`	Section supporting text.
`FormActions`	Aligns submit and cancel actions.

Previous component

Popover

All components