# Quantity Selector

## Visual Structure

```
ga-input ga-input--quantity-selector
  ├── input
  ├── ga-input__quantity-button (decrease)
  ├── ga-input__quantity-separator
  └── ga-input__quantity-button (increase)
```

## Elements Hierarchy

### Core Block

- `ga-input ga-input--quantity-selector` - Quantity selector variant of the input component. Use `ga-input` for the outer input border/state styling.

### Mandatory Elements

- `input` - The native HTML input element (use `type="number"` or `type="text"`)
- `ga-input__quantity-button` - Buttons for decreasing and increasing the value (use lucide `MinusIcon` and `PlusIcon`)
- `ga-input__quantity-separator` - A 1px vertical line separator between the buttons

### Modifiers

- `ga-input--quantity-selector` - Styles the input as a quantity selector
- Use native `disabled` attributes on the input and buttons for disabled state

## Examples

### Default

```html
<div class="ga-input ga-input--quantity-selector">
  <input type="number" value="1" />
  <button type="button" class="ga-input__quantity-button">
    <!-- icon: minus, size=16 -->
  </button>
  <div class="ga-input__quantity-separator"></div>
  <button type="button" class="ga-input__quantity-button">
    <!-- icon: plus, size=16 -->
  </button>
</div>
```

### Disabled Button

```html
<div class="ga-input ga-input--quantity-selector">
  <input type="number" value="0" />
  <button type="button" class="ga-input__quantity-button" disabled="">
    <!-- icon: minus, size=16 -->
  </button>
  <div class="ga-input__quantity-separator"></div>
  <button type="button" class="ga-input__quantity-button">
    <!-- icon: plus, size=16 -->
  </button>
</div>
```

### Disabled Input

```html
<div class="ga-input ga-input--quantity-selector">
  <input type="number" placeholder="" disabled="" />
  <button type="button" class="ga-input__quantity-button" disabled="">
    <!-- icon: minus, size=16 -->
  </button>
  <div class="ga-input__quantity-separator"></div>
  <button type="button" class="ga-input__quantity-button" disabled="">
    <!-- icon: plus, size=16 -->
  </button>
</div>
```

### Form Field Error

```html
<div class="ga-form-field">
  <div class="ga-input ga-input--invalid ga-input--quantity-selector">
    <input type="number" value="0" />
    <button type="button" class="ga-input__quantity-button">
      <!-- icon: minus, size=16 -->
    </button>
    <div class="ga-input__quantity-separator"></div>
    <button type="button" class="ga-input__quantity-button">
      <!-- icon: plus, size=16 -->
    </button>
  </div>
  <div class="ga-form-field__info">
    <!-- icon: triangle-alert, size=16, class="ga-icon" -->
    Hour entry cannot be zero.
  </div>
</div>
```