Label
Label provides accessible text labels for form elements. It supports error states and can be associated with form controls using the htmlFor attribute.
Prop | Type | Default value | Description |
|---|---|---|---|
Prop htmlFor | Type string | Default value undefined | Description ID of the form element this label is associated with (for accessibility) |
Prop disabled | Type boolean | Default value false | Description Whether the label is in a disabled state, typically shown with muted styling |
Prop error | Type boolean | Default value false | Description Whether the label is in an error state, typically shown with red styling |
Quick Start
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
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
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
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>
)
}