# Checkbox

Lets you turn a single independent option on or off.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Checkbox.tsx)

## Overview

A checkbox is an independent on or off choice. A hidden native input submits its value with the form.

Pair it with `Field.Item` and `Field.Label`, or wrap it in a `label`, so its text toggles it.

## Examples

### Basic

```tsx
import { Checkbox, Field } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Field.Root>
      <Field.Item>
        <Checkbox defaultChecked />
        <Field.Label>Email me receipts</Field.Label>
      </Field.Item>
    </Field.Root>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Checkbox/Basic.tsx)

### Checked

Set `defaultChecked` for an uncontrolled checkbox, or `checked` with `onCheckedChange` to control it.

```tsx
import { Checkbox, Field, style } from '@tempoxyz/ds'

function Item(props: Checkbox.Props & { label: string }) {
  const { label, ...checkbox } = props

  return (
    <Field.Root>
      <Field.Item>
        <Checkbox {...checkbox} />
        <Field.Label>{label}</Field.Label>
      </Field.Item>
    </Field.Root>
  )
}

export function Demo() {
  return (
    <div {...styles.column()}>
      <Item label="Unchecked" />
      <Item defaultChecked label="Checked" />
    </div>
  )
}

namespace styles {
  export const column = style({ display: 'flex', flexDirection: 'column', gap: '4' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Checkbox/Checked.tsx)

### Indeterminate

Set `indeterminate` to show a minus and expose the mixed state.

```tsx
import { Checkbox, Field } from '@tempoxyz/ds'

function Item(props: Checkbox.Props & { label: string }) {
  const { label, ...checkbox } = props

  return (
    <Field.Root>
      <Field.Item>
        <Checkbox {...checkbox} />
        <Field.Label>{label}</Field.Label>
      </Field.Item>
    </Field.Root>
  )
}

export function Demo() {
  return <Item indeterminate label="Indeterminate" />
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Checkbox/Indeterminate.tsx)

### Disabled

```tsx
import { Checkbox, Field, style } from '@tempoxyz/ds'

function Item(props: Checkbox.Props & { label: string }) {
  const { label, ...checkbox } = props

  return (
    <Field.Root>
      <Field.Item>
        <Checkbox {...checkbox} />
        <Field.Label>{label}</Field.Label>
      </Field.Item>
    </Field.Root>
  )
}

export function Demo() {
  return (
    <div {...styles.column()}>
      <Item disabled label="Disabled" />
      <Item defaultChecked disabled label="Disabled checked" />
    </div>
  )
}

namespace styles {
  export const column = style({ display: 'flex', flexDirection: 'column', gap: '4' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Checkbox/Disabled.tsx)

### Size

Set `size` to `small`, `medium`, or `large`. It defaults to `medium`.

```tsx
import { Checkbox, Field, style } from '@tempoxyz/ds'

function Item(props: Checkbox.Props & { label: string }) {
  const { label, ...checkbox } = props

  return (
    <Field.Root>
      <Field.Item>
        <Checkbox {...checkbox} />
        <Field.Label>{label}</Field.Label>
      </Field.Item>
    </Field.Root>
  )
}

export function Demo() {
  return (
    <div {...styles.column()}>
      {(['small', 'medium', 'large'] as const).map((size) => (
        <Item defaultChecked key={size} label={size} size={size} />
      ))}
    </div>
  )
}

namespace styles {
  export const column = style({ display: 'flex', flexDirection: 'column', gap: '4' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Checkbox/Size.tsx)

## Guidelines

TODO: Write guidelines for Checkbox.