# SilkeCheckbox

A checkbox input component for boolean selections with label support, validation, and form integration.

## Features

- **Controlled value**: Works with React state
- **Form integration**: Works seamlessly with SilkeForm
- **Validation**: Built-in required validation with error display
- **Size variants**: Standard and small sizes
- **Accessibility**: Proper label association with generated IDs

## Basic Usage

```js
const [checked, setChecked] = React.useState(false);

<SilkeCheckbox label="Accept terms" value={checked} onChange={setChecked} />;
```

## States

```js
const [checked, setChecked] = React.useState(false);

<SilkeBox column gap="s">
  <SilkeCheckbox label="Unchecked" value={false} onChange={() => {}} />
  <SilkeCheckbox label="Checked" value={true} onChange={() => {}} />
  <SilkeCheckbox label="Disabled unchecked" disabled value={false} onChange={() => {}} />
  <SilkeCheckbox label="Disabled checked" disabled value={true} onChange={() => {}} />
</SilkeBox>;
```

## Size Variants

```js
const [value1, setValue1] = React.useState(false);
const [value2, setValue2] = React.useState(false);

<SilkeBox column gap="s">
  <SilkeCheckbox label="Default size (base)" value={value1} onChange={setValue1} />
  <SilkeCheckbox label="Small size" size="s" value={value2} onChange={setValue2} />
</SilkeBox>;
```

## Required Validation

Shows error when required checkbox is not checked:

```js
const [checked, setChecked] = React.useState(false);

<SilkeBox column gap="s">
  <SilkeCheckbox label="I agree to the terms" required value={checked} onChange={setChecked} />
  <SilkeText size="s" color={checked ? 'success-50' : 'neutral-60'}>
    {checked ? 'Thanks for agreeing!' : 'You must check to continue'}
  </SilkeText>
</SilkeBox>;
```

## Without Label

```js
const [checked, setChecked] = React.useState(false);

<SilkeBox gap="s" vAlign="center">
  <SilkeCheckbox value={checked} onChange={setChecked} />
  <SilkeText>Custom label next to checkbox</SilkeText>
</SilkeBox>;
```

## With Name (Auto-Label)

When `name` is provided without `label`, the name is used as the label:

```js
const [checked, setChecked] = React.useState(false);

<SilkeCheckbox name="newsletter" value={checked} onChange={setChecked} />;
```

## Form Integration

Use within SilkeForm for automatic form state management:

```js
const [formValue, setFormValue] = React.useState({
  marketing: false,
  analytics: true,
  terms: false,
});

<SilkeForm value={formValue} onChange={(value) => setFormValue(value)}>
  <SilkeBox column gap="s">
    <SilkeCheckbox name="marketing" label="Receive marketing emails" />
    <SilkeCheckbox name="analytics" label="Allow analytics tracking" />
    <SilkeCheckbox name="terms" label="Accept terms and conditions" required />
  </SilkeBox>
</SilkeForm>;
```

## Read-Only State

Prevent changes while showing current value:

```js
<SilkeBox column gap="s">
  <SilkeCheckbox label="Read-only unchecked" readOnly value={false} />
  <SilkeCheckbox label="Read-only checked" readOnly value={true} />
</SilkeBox>;
```

## Custom Error Message

Pass a custom error message:

```js
const [checked, setChecked] = React.useState(false);

<SilkeCheckbox
  label="Enable feature"
  value={checked}
  onChange={setChecked}
  error={!checked ? 'This feature must be enabled' : undefined}
/>;
```

## Props

| Prop       | Type                        | Default | Description                              |
| ---------- | --------------------------- | ------- | ---------------------------------------- |
| `value`    | `boolean`                   | -       | Current checked state                    |
| `onChange` | `(value: boolean) => void`  | -       | Called when checkbox is toggled          |
| `label`    | `string`                    | -       | Label text displayed next to checkbox    |
| `name`     | `string`                    | -       | Field name (also used as label fallback) |
| `size`     | `'s' \| 'base'`             | `'base'`| Checkbox size                            |
| `disabled` | `boolean`                   | `false` | Disable the checkbox                     |
| `readOnly` | `boolean`                   | `false` | Prevent changes                          |
| `required` | `boolean`                   | `false` | Mark as required (shows error if false)  |
| `error`    | `string`                    | -       | Custom error message to display          |
| `id`       | `string`                    | -       | Custom ID (auto-generated if not set)    |
| `style`    | `React.CSSProperties`       | -       | Inline styles                            |

Also accepts standard HTML input attributes.