---
name: Checkbox
menu: Components
route: /components/checkbox
---

import { Playground, Props } from 'docz'
import Checkbox from './'

# Checkbox

A checkbox. The native element is functional but hidden. Icons are rendered
in its place.

Can be controlled or uncontrolled. For controlled, you must supply the
`checked` prop, eg `<Checkbox checked />` or `<Checkbox checked={false} />`,
or the `indeterminate` prop. And you must supply an `onChange` handler.

For uncontrolled, you must omit the `checked` prop.  And optionally supply the
`defaultChecked` prop.

## Import
`import { Checkbox } from '@blasterjs/core'`


## Uncontrolled

<Playground>
    <Checkbox value="alpha" mr={2} />
    <Checkbox defaultChecked value="beta" mr={2} />
    <Checkbox disabled value="gamma" />
</Playground>


## Controlled

<Playground>
    <Checkbox checked value="alpha" mr={2} />
    <Checkbox checked={false} value="beta" mr={2} />
    <Checkbox checked disabled value="gamma" />
</Playground>


## Indeterminate

<Playground>
    <Checkbox value="maybe" indeterminate />
</Playground>


## PropTypes

| Prop | Type | Required | Default | Description |
|:-----|:-----|:---------|:--------|:------------|
| size | string | no | `2rem` | icon size |
| id | string | no | | passed to underlying element |
| name | string | no | | passed to underlying element |
| value | string | no | | passed to underlying element |
| onChange | function | no | | |
| disabled | bool | no | `false` | passed to underlying element |
| defaultChecked | bool | no | | initial checked value when uncontrolled |
| checked | bool | no | | supply this when controlled |
| indeterminate | bool | no | `false` | indeterminate checkboxes must be controlled |
| required | bool | no | `false` | passed to underlying element |
| invalid | bool | no | `false` | passed to underlying element |
| checkedIcon | string | no | `checkboxChecked` | |
| uncheckedIcon | string | no | `checkboxUnchecked` | |
| indeterminateIcon | string | no | `checkboxIndeterminate` | |
| checkedColor | string | no | `primary` | |
| uncheckedColor | string | no | `gray100` | |
| indeterminateColor | string | no | `primary` | |
| `COMMON` | Style Prop |  |  | see [Style Props](/style-props) |
| `MISC` | Style Prop |  |  | see [Style Props](/style-props) |
| `LAYOUT` | Style Prop |  |  | see [Style Props](/style-props) |
| `POSITION` | Style Prop |  |  | see [Style Props](/style-props) |
| `FLEX_ITEM` | Style Prop |  |  | see [Style Props](/style-props) |


## Theming

### Schema
```
{
  colors: {
    checkedColor,
    uncheckedColor,
    indeterminateColor,
    shadowColorFocus
  },
  overrides: css`
    ...
  `
}
```

- [Default theme](https://github.com/raster-foundry/blasterjs/tree/master/packages/core/theme/components/checkbox)
- [Learn more about themeing](/blaster-theme)