@neynar/ui/docs/llm/components/forms.md

React UI component library built on shadcn/ui and Tailwind CSS

# Form Components

Essential form components for building interactive user interfaces with proper TypeScript support.

## Basic Input Components

```tsx
import { Input, Label, Textarea, TextField } from "@neynar/ui"

// Basic input with label
<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="Enter your email" />
</div>

// Textarea for longer content
<Textarea placeholder="Enter your message" rows={4} />

// Combined text field (input + label)
<TextField label="Username" placeholder="Enter username" required />
```

## Selection Components

```tsx
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@neynar/ui"
import { Checkbox, Switch, RadioGroup, RadioGroupItem } from "@neynar/ui"

// Select dropdown
<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
  </SelectContent>
</Select>

// Checkbox with label
<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms</Label>
</div>

// Switch toggle
<Switch defaultChecked />

// Radio group
<RadioGroup defaultValue="option1">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option1" id="r1" />
    <Label htmlFor="r1">Option 1</Label>
  </div>
</RadioGroup>
```

## Advanced Components

```tsx
import { Slider, Calendar, DatePicker, Combobox } from "@neynar/ui"

// Range slider
<Slider defaultValue={[50]} max={100} step={1} />

// Date picker
<DatePicker placeholder="Pick a date" />

// Combobox with search
<Combobox
  options={[
    { value: "react", label: "React" },
    { value: "vue", label: "Vue" }
  ]}
  placeholder="Select framework"
/>
```

## TypeScript Types

```tsx
type FormData = {
  email: string
  message: string
  category: string
  notifications: boolean
  priority: "low" | "medium" | "high"
  deadline: Date
}
```