---
name: Checkbox
route: /components/common/forms/form-checkbox
menu: Forms
edit: false
---

import { Playground, Props } from 'docz';
import FormCheckbox from './form-checkbox';

# FormCheckbox

**SUBCATEGORY:** Forms

<hr />

## Checkbox

### Description

For a set of selectable values. In a group of checkbox inputs, multiple values may be selected.

**Default**

<Playground>
  <FormCheckbox labelText='Input text' id='checkboxRegular' />
</Playground>

**Disabled**

<Playground>
  <FormCheckbox labelText='Input text' id='checkboxDisabled' disabled />
</Playground>

**Selected**

<Playground>
  <FormCheckbox
    labelText='Input text'
    id='checkboxSelected'
    defaultChecked={true}
  />
</Playground>

**Selected and disabled**

<Playground>
  <FormCheckbox
    labelText='Input text'
    id='checkboxSelectedDisabled'
    defaultChecked={true}
    disabled
  />
</Playground>

**Indeterminate**

<Playground>
  <FormCheckbox
    labelText='Input text'
    id='checkboxIndeterminate'
    isIndeterminate
  />
</Playground>

**Indeterminate and disabled**

<Playground>
  <FormCheckbox
    labelText='Input text'
    id='checkboxIndeterminate'
    isIndeterminate
    disabled
  />
</Playground>

**Other use-cases**

<Playground>
  <FormCheckbox labelText='A checkbox...' id='other-1' />
  <br />
  <FormCheckbox labelText='Side-by-side another one with a lot of text which should wrap when needed' id='other-2' />
</Playground>

## Properties

<Props of={FormCheckbox} />