# Checkbox

## Visual Structure

```
ga-checkbox [--invalid]
  ├── ga-checkbox__native
  ├── ga-checkbox__marker
  │    ├── ga-checkbox__marker__indicator-checked
  │    └── ga-checkbox__marker__indicator-indeterminate
  └── ga-checkbox__label (optional)
```

## Elements Hierarchy

### Core Block

- `ga-checkbox` - Main container for the checkbox component

### Mandatory Elements

- `ga-checkbox__native` - Native HTML input element (hidden visually)
- `ga-checkbox__marker` - Visual marker/box for the checkbox state
- `ga-checkbox__marker__indicator-checked` - Icon shown when checkbox is checked (use `CheckIcon` from Lucide icons)
- `ga-checkbox__marker__indicator-indeterminate` - Icon shown when checkbox is in indeterminate state (use `MinusIcon` from Lucide icons)

### Optional Elements

- `ga-checkbox__label` - Text label for the checkbox

### Modifiers

- `ga-checkbox--invalid` - Styles the checkbox to indicate an invalid/error state

## Examples

### Default

```html
<label class="ga-checkbox">
  <input type="checkbox" class="ga-checkbox__native" />
  <div class="ga-checkbox__marker">
    <!-- icon: check, size=12, class="ga-checkbox__marker__indicator-checked" -->
    <!-- icon: minus, size=12, class="ga-checkbox__marker__indicator-indeterminate" -->
  </div>
  <div class="ga-checkbox__label">Option A</div>
</label>
```

### Checked

```html
<label class="ga-checkbox">
  <input type="checkbox" class="ga-checkbox__native" checked="" />
  <div class="ga-checkbox__marker">
    <!-- icon: check, size=12, class="ga-checkbox__marker__indicator-checked" -->
    <!-- icon: minus, size=12, class="ga-checkbox__marker__indicator-indeterminate" -->
  </div>
  <div class="ga-checkbox__label">Option A</div>
</label>
```

### Indeterminate

```html
<label class="ga-checkbox">
  <input type="checkbox" class="ga-checkbox__native" />
  <div class="ga-checkbox__marker">
    <!-- icon: check, size=12, class="ga-checkbox__marker__indicator-checked" -->
    <!-- icon: minus, size=12, class="ga-checkbox__marker__indicator-indeterminate" -->
  </div>
  <div class="ga-checkbox__label">Option A</div>
</label>
```

### Disabled

```html
<label class="ga-checkbox">
  <input type="checkbox" class="ga-checkbox__native" disabled="" checked="" />
  <div class="ga-checkbox__marker">
    <!-- icon: check, size=12, class="ga-checkbox__marker__indicator-checked" -->
    <!-- icon: minus, size=12, class="ga-checkbox__marker__indicator-indeterminate" -->
  </div>
  <div class="ga-checkbox__label">Option A</div>
</label>
```

### Invalid

```html
<label class="ga-checkbox ga-checkbox--invalid">
  <input type="checkbox" class="ga-checkbox__native" required="" />
  <div class="ga-checkbox__marker">
    <!-- icon: check, size=12, class="ga-checkbox__marker__indicator-checked" -->
    <!-- icon: minus, size=12, class="ga-checkbox__marker__indicator-indeterminate" -->
  </div>
  <div class="ga-checkbox__label">Option A</div>
</label>
```

### Nolabel

```html
<div class="ga-checkbox">
  <input type="checkbox" class="ga-checkbox__native" />
  <div class="ga-checkbox__marker">
    <!-- icon: check, size=12, class="ga-checkbox__marker__indicator-checked" -->
    <!-- icon: minus, size=12, class="ga-checkbox__marker__indicator-indeterminate" -->
  </div>
</div>
```