# Label

Accessible text label for form controls.

---

## Default

```tsx
import { Label } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return <Label id="test-input" value="This is a label" />;
}
```

## With Input

```tsx
import { Input, Label } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <>
      <Label id="test-input" value="Email Address" withInput />
      <Input
        aria-labelledby="test-input"
        id="test-input"
        placeholder="Enter email address..."
      />
    </>
  );
}
```

## Bypass Casing

```tsx
import { Input, Label } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <>
      <Label bypassCasing id="test-input" value="Email address" withInput />
      <Input
        aria-labelledby="test-input"
        id="test-input"
        placeholder="Enter email address..."
      />
    </>
  );
}
```