---
title: Checkbox
description: Checkboxes allow users to select one or more items from a list of options. They are commonly used in forms and settings interfaces.
category: Forms
related: [Switch, RadioGroup, Label, Container]
commonPatterns: [form-checkbox, settings-checkbox, multi-select-checkbox]
---

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

# 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                                                                             |
| -------------- | ----------------------------------------------------------------------- | -------------- | --------------------------------------------------------------------------------------- |
| label          | `ReactNode`                                                             | `undefined`    | The label text or content displayed next to the checkbox                                |
| orientation    | `"vertical" \| "horizontal"`                                            | `"horizontal"` | Layout orientation - whether checkbox and label are arranged vertically or horizontally |
| variant        | `"default" \| "var1" \| "var2" \| "var3" \| "var4" \| "var5" \| "var6"` | `"default"`    | Visual variant/style of the checkbox                                                    |
| dir            | `"start" \| "end"`                                                      | `"start"`      | Direction/position of the label relative to the checkbox (start = before, end = after)  |
| disabled       | `boolean`                                                               | `false`        | Whether the checkbox is disabled and cannot be interacted with                          |
| defaultChecked | `boolean`                                                               | `false`        | Whether the checkbox is checked by default (uncontrolled)                               |

```tsx
import { Checkbox } from '@clickhouse/click-ui'

<Checkbox 
  id="example"
  label="Basic Checkbox"
/>
```

## Quick start

```tsx
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

```tsx
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

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

## Variants

### Orientation

**Horizontal**

**Vertical**

### Variants

**Variant 1**

**Variant 2**

**Variant 3**

**Variant 4**

**Variant 5**

**Variant 6**

### States

**Checked**

**Disabled**