fannypack/src/Checkbox/Checkbox.mdx

An accessible, composable, and friendly React UI Kit

---
name: Checkbox
route: /form/checkbox
menu: Form
---

import { Playground, PropsTable } from 'docz';
import { Box } from '../primitives/index';
import Checkbox from './index';

# Checkbox

## Import

`import { Checkbox } from 'fannypack'`

## Basic Usage

<Playground>
  <Checkbox label="Click me" />
</Playground>

## Disabled

Make the checkbox disabled with the `disabled` prop.

<Playground>
  <Checkbox disabled label="Click me" />
  <Checkbox checked disabled label="Click me" />
</Playground>

## States

A checkbox can use different states (as per palette) such as `danger`, `success` and `warning`.

<Playground>
  <Checkbox state="danger" label="Click me" />
  <Checkbox state="success" label="Click me" />
  <Checkbox state="warning" label="Click me" />
  <Checkbox state="primary" label="Click me" />
</Playground>

## Props

<PropsTable of={Checkbox} />

## Theming

### Schema

```jsx
{
  base: string | Object,
  icon: {
    base: string | Object,
    checked: string | Object
    disabled: string | Object,
    focus: string | Object
    tick: string | Object
  }
}
```