# Checkbox

A yes/no choice for forms, with a checked, unchecked and indeterminate state and a springy tick.

Source page: https://sproutboat.com/ikada/components/checkbox

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/checkbox.json
```
Or from the package: `import { Checkbox } from "@sproutboat/ikada";`
## Usage
```tsx
import { Checkbox } from "@/components/ikada/checkbox";

<Checkbox label="Preview builds" description="Build every pull request on its own URL." defaultChecked />
```
## Examples
### States
A box bobs once as it fills. Checked is a solid green fill, 3:1 against the unchecked box.
```tsx
<Checkbox label="Unchecked" />
<Checkbox label="Checked" defaultChecked />
<Checkbox label="Mixed" indeterminate />
<Checkbox label="Disabled" disabled />
<Checkbox
  label="Run migrations first"
  description="Blocks the traffic shift until they pass."
/>
```
### Invalid

```tsx
<Checkbox label="I understand robin goes offline during the move" invalid />
```
### Without a label
Pass aria-label so the box still has a name.
```tsx
<Checkbox aria-label="Select wren" />
```
## Props
### CheckboxProps
Also takes every prop of `Omit<ComponentProps<typeof BaseCheckbox.Root>, "className" | "children">`.
| Prop | Type | Description |
| --- | --- | --- |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
| label? | `ReactNode` | Visible label. Without one, pass aria-label. |
| description? | `ReactNode` | Muted line under the label, linked to the checkbox as its description. |
| invalid? | `boolean` | Marks the checkbox invalid: danger ring and aria-invalid. |
| style? | `CSSProperties \| ((state: CheckboxRootState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, CheckboxRootState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/checkbox.tsx