@neynar/ui/llm-docs/label.llm.md

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

# Label

**Type**: component

Label component for form controls with full accessibility support A fundamental form component that provides accessible text labels for form controls. Built on Radix UI Label primitive, it automatically associates with form elements and expands their clickable area for improved usability and accessibility. Essential for creating accessible forms that meet WCAG guidelines.

## JSX Usage

```jsx
import { Label } from '@neynar/ui';

<Label
  className="value"
  htmlFor="value"
  asChild={true}
  onClick={handleClick}
  onKeyDown={handleKeyDown}
  id="value"
  style={value}
  tabIndex={0}
  "aria-label"="value"
  "aria-describedby"="value"
  "aria-invalid"={true}
  "aria-required"={true}
>
  {/* Your content here */}
</Label>
```

## Component Props

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### htmlFor
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: No description available

### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### onClick
- **Type**: `React.MouseEventHandler<HTMLLabelElement>`
- **Required**: No
- **Description**: No description available

### onKeyDown
- **Type**: `React.KeyboardEventHandler<HTMLLabelElement>`
- **Required**: No
- **Description**: No description available

### id
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### style
- **Type**: `React.CSSProperties`
- **Required**: No
- **Description**: No description available

### tabIndex
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### "aria-label"
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### "aria-describedby"
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### "aria-invalid"
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### "aria-required"
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic label with input
<div className="space-y-2">
  <Label htmlFor="email">Email address</Label>
  <Input id="email" type="email" placeholder="Enter your email" />
</div>
```
### Example 2
```tsx
// Required field with indicator
<Label htmlFor="username">
  Username <span className="text-destructive">*</span>
</Label>
<Input id="username" required />
```
### Example 3
```tsx
// Checkbox with label
<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms" className="text-sm font-normal">
    I agree to the terms and conditions
  </Label>
</div>
```
### Example 4
```tsx
// Label with helper text
<div className="space-y-1">
  <Label htmlFor="password">Password</Label>
  <Input id="password" type="password" />
  <p className="text-sm text-muted-foreground">
    Must be at least 8 characters long
  </p>
</div>
```
### Example 5
```tsx
// Complex label with nested content
<Label htmlFor="plan" className="flex flex-col space-y-1 cursor-pointer">
  <span className="font-semibold">Choose your plan</span>
  <span className="text-sm text-muted-foreground">
    You can upgrade or downgrade anytime
  </span>
</Label>
```