---
title: Generic label
description: GenericLabel provides a styled label element for form fields with proper hover and focus states.
category: Forms
related: [Label, TextField, Checkbox, RadioGroup]
commonPatterns: [form-labels, accessibility, field-association]
---

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

# Generic label

GenericLabel is a styled HTML label element designed for associating labels with form inputs. It provides consistent styling with proper hover, focus, and disabled states.

## Example

## Props

| Prop     | Type        | Default value | Description                                              |
| -------- | ----------- | ------------- | -------------------------------------------------------- |
| htmlFor  | `string`    | `undefined`   | The ID of the form element this label is associated with |
| disabled | `boolean`   | `false`       | Whether the label appears in a disabled state            |
| children | `ReactNode` | `-`           | Label text or content                                    |

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

<GenericLabel htmlFor="my-input">Field Label</GenericLabel>
<TextField id="my-input" />
```

## Quick start

Use GenericLabel to create accessible form field labels:

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

function FormField() {
return (
  <Container orientation='vertical' gap='sm'>
    <GenericLabel htmlFor="email">Email Address</GenericLabel>
    <TextField id="email" type="email" placeholder="you@example.com" />
  </Container>
)
}
```

## Related components

- **Label**: A more feature-rich label component with built-in form field integration
- **TextField**: Text input component to pair with labels
- **Checkbox**: Checkbox component with label support
- **RadioGroup**: Radio group with label support

## Common use cases

### Standard form field

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

function PasswordField() {
return (
  <Container orientation='vertical' gap='sm'>
    <GenericLabel htmlFor="password">Password</GenericLabel>
    <TextField id="password" type="password" />
  </Container>
)
}
```

### Disabled state

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

function DisabledField() {
return (
  <Container orientation='vertical' gap='sm'>
    <GenericLabel htmlFor="disabled" disabled>Disabled Field</GenericLabel>
    <TextField id="disabled" disabled />
  </Container>
)
}
```

### Multiple fields

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

function NameForm() {
return (
  <Container orientation='vertical' gap='md'>
    <Container orientation='vertical' gap='sm'>
      <GenericLabel htmlFor="first-name">First Name</GenericLabel>
      <TextField id="first-name" />
    </Container>
    <Container orientation='vertical' gap='sm'>
      <GenericLabel htmlFor="last-name">Last Name</GenericLabel>
      <TextField id="last-name" />
    </Container>
  </Container>
)
}
```