Checkbox
Checkboxes allow users to select one or more items from a list of options. They are commonly used in forms and settings interfaces.
Example
Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop label | Type ReactNode | Default value undefined | Description The label text or content displayed next to the checkbox |
Prop orientation | Type "vertical" | "horizontal" | Default value "horizontal" | Description Layout orientation - whether checkbox and label are arranged vertically or horizontally |
Prop variant | Type "default" | "var1" | "var2" | "var3" | "var4" | "var5" | "var6" | Default value "default" | Description Visual variant/style of the checkbox |
Prop dir | Type "start" | "end" | Default value "start" | Description Direction/position of the label relative to the checkbox (start = before, end = after) |
Prop disabled | Type boolean | Default value false | Description Whether the checkbox is disabled and cannot be interacted with |
Prop defaultChecked | Type boolean | Default value false | Description Whether the checkbox is checked by default (uncontrolled) |
Quick start
import { Checkbox } from '@clickhouse/click-ui'
function MyCheckbox() {
return (
<Checkbox
id="example"
label="I agree to the terms"
/>
)
}Related components
- Switch: For toggle switches between two states.
- RadioGroup: For single selection from multiple options.
- Label: Provides accessible labels for checkboxes.
- Container: For organizing multiple checkboxes in layouts.
Common use cases
Form checkbox
import { Checkbox, Container } from '@clickhouse/click-ui'
function FormCheckboxes() {
return (
<Container orientation='vertical' gap='sm'>
<Checkbox id="terms" label="I agree to the terms" />
<Checkbox id="newsletter" label="Subscribe to newsletter" />
</Container>
)
}Settings checkbox
import { Checkbox, Container } from '@clickhouse/click-ui'
function SettingsCheckboxes() {
return (
<Container orientation='vertical' gap='sm'>
<Checkbox id="notifications" label="Enable notifications" defaultChecked />
<Checkbox id="dark-mode" label="Dark mode" />
</Container>
)
}