---
title: Label
description: Label is used to provide accessible labels for form elements and other interactive components.
category: Forms
related: [TextField, Checkbox, RadioGroup, Switch, Select]
commonPatterns: [form-field-label, error-label, disabled-label]
---

Source: https://clickhouse.design/click-ui/label

# Label

Label provides accessible text labels for form elements. It supports error states and can be associated with form controls using the htmlFor attribute.

Email Address

Name (with error)

I agree to the terms

Disabled Label

| Prop     | Type      | Default value | Description                                                                  |
| -------- | --------- | ------------- | ---------------------------------------------------------------------------- |
| htmlFor  | `string`  | `undefined`   | ID of the form element this label is associated with (for accessibility)     |
| disabled | `boolean` | `false`       | Whether the label is in a disabled state, typically shown with muted styling |
| error    | `boolean` | `false`       | Whether the label is in an error state, typically shown with red styling     |

```tsx
import { Label, TextField } from '@clickhouse/click-ui'

<Label htmlFor="email-input">Email Address</Label>
<TextField id="email-input" placeholder="Enter your email" />
```

## Quick start

```tsx
import { Label, TextField } from '@clickhouse/click-ui'

function MyFormInput() {
return (
  <div>
    <Label htmlFor='my-input'>My Input Field</Label>
    <TextField id='my-input' placeholder='Enter value' />
  </div>
)
}
```

## Related components

- **TextField**: Commonly used with Label for text inputs.
- **Checkbox**: Labels are essential for accessible checkboxes.
- **RadioGroup**: Labels provide context for radio buttons.
- **Switch**: Used with Label for toggle switches.
- **Select**: Labels provide context for dropdowns.

## Common use cases

### Default label

```tsx
import { Label, TextField } from '@clickhouse/click-ui'

function DefaultLabelExample() {
return (
  <div>
    <Label htmlFor='default-input'>Default Label</Label>
    <TextField id='default-input' placeholder='Input field' />
  </div>
)
}
```

### Error state

```tsx
import { Label, TextField } from '@clickhouse/click-ui'

function ErrorLabelExample() {
return (
  <div>
    <Label htmlFor='error-input' error>Label with Error</Label>
    <TextField id='error-input' placeholder='Input field' error />
  </div>
)
}
```

### Disabled state

```tsx
import { Label, TextField } from '@clickhouse/click-ui'

function DisabledLabelExample() {
return (
  <div>
    <Label htmlFor='disabled-input' disabled>Disabled Label</Label>
    <TextField id='disabled-input' placeholder='Input field' disabled />
  </div>
)
}
```

## Variants

### Default label

Default Label

### Error state

Label with Error

### Disabled state

Disabled Label