Source

Command Palette

Search for a command to run...

Form

Form provider component using React Hook Form for form state management.

About Form

A Context Provider that wraps form components to share React Hook Form values and methods. Use FormField, FormItem, FormLabel, and FormMessage to build accessible form controls.

Installation

Import the Form component from LSD:
import { Form } from '@nipsys/lsd'

export default function MyComponent() {
  return <Form />
}

Usage

The simplest form of the component with default styling.
Basic

Features

Additional features and capabilities of the component.
Validation

With Other Components

Composition

Form
└── FormField
└── FormItem
├── FormLabel
├── FormControl
├── FormDescription
└── FormMessage

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate through form fields• Enter - Submit form when on submit button• Space - Toggle checkboxes and radio buttons
ARIA Attributes
Proper ARIA attributes for screen readers
• aria-invalid - Indicates invalid form fields• aria-describedby - Links field to description or error messages• aria-labelledby or aria-label - Provides accessible labels
Focus States
Visible focus indicators for keyboard users
• Follows standard HTML form focus behavior. Focus moves through fields in document order when using Tab. Invalid fields receive focus when form validation fails.
Radio Group