Introduction

Components

Input Controls

• Button - Interactive buttons with multiple variants and states
• Input - Text input fields with validation support
• Textarea - Multi-line text input areas
• Select - Dropdown selection components
• Checkbox - Boolean input controls
• Radio Group - Single-choice selection groups
• Switch - Toggle switches for binary choices

Advanced Controls

• Combobox - Searchable selection dropdown
• Multi-Select - Multiple item selection
• File Upload - File selection and upload
• Date Picker - Date selection component
• OTP Input - One-time password input

Form Management

• Form - Complete form wrapper with validation
• Label - Accessible form field labels
• Form Field - Structured form field container

Form Patterns

Basic Form Structure

import { 
  Form, 
  FormField, 
  FormItem, 
  FormLabel, 
  FormControl, 
  FormMessage,
  Input,
  Button 
} from '@helgadigitals/vera-ui'

function ContactForm() {
  return (
    <Form>
      <FormField name="email">
        <FormItem>
          <FormLabel>Email</FormLabel>
          <FormControl>
            <Input type="email" placeholder="Enter your email" />
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>
      <Button type="submit">Submit</Button>
    </Form>
  )
}

Form Validation

All form components integrate with popular validation libraries like React Hook Form and Zod for robust form validation and error handling.

Accessibility Features

• Keyboard Navigation: All form controls support proper keyboard interaction
• Screen Readers: Semantic HTML with appropriate ARIA attributes
• Focus Management: Clear focus indicators and logical tab order
• Error Handling: Accessible error messages linked to form controls
• Required Fields: Clear indication of required vs optional fields