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

Username

Props

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

Quick start

Use GenericLabel to create accessible form field labels:

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>
)
}

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

Password

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

Disabled Field

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

First Name

Last Name

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>
)
}

Label Text