# Select

## Visual Structure

```
ga-select [--empty|--expanded|--invalid|--disabled|--multi|--label-hidden]
  ├── ga-select__main-area
  │   ├── ga-select__placeholder (when no value)
  │   ├── ga-select__value (when value(s) selected)
  │   └── ga-select__input (for searchable variant)
  └── ga-select__suffix
      └── ga-select__action-icon
```

## Elements Hierarchy

### Core Block

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

### Mandatory Elements

- `ga-select__main-area` - Container for the value, placeholder, and input

### Optional Elements

- `ga-select__placeholder` - Shown when no value is selected
- `ga-select__value` - Shown when a value (single) or tags (multi) are selected
- `ga-select__input` - Input field for searchable variant
- `ga-select__suffix` - Container for icons (chevron, clear, etc.)
- `ga-select__action-icon` - Icon indicating dropdown or clear action
- `ga-tag` - Tag element for each selected value in multi-select

### Modifiers

- `ga-select--empty` - No value selected
- `ga-select--expanded` - Dropdown is open
- `ga-select--invalid` - Validation error
- `ga-select--disabled` - Disabled state
- `ga-select--multi` - Multi-select mode
- `ga-select--label-hidden` - Placeholder remains visible when values are selected (multi-select only)

## Examples

### Single Select

#### Empty

```html
<div class="ga-select ga-select--empty">
  <div class="ga-select__main-area">
    <div class="ga-select__placeholder">Placeholder</div>
  </div>
  <div class="ga-select__suffix">
    <!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
  </div>
</div>
```

#### Selected

```html
<div class="ga-select">
  <div class="ga-select__main-area">
    <div class="ga-select__value">Mercedes</div>
  </div>
  <div class="ga-select__suffix">
    <!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
  </div>
</div>
```

#### Expanded

```html
<div class="ga-select ga-select--expanded">
  <div class="ga-select__main-area">
    <div class="ga-select__value">Mercedes</div>
  </div>
  <div class="ga-select__suffix">
    <!-- icon: chevron-up, size=24, class="ga-select__action-icon" -->
  </div>
</div>
```

#### Invalid Empty

```html
<div class="ga-select ga-select--invalid ga-select--empty">
  <div class="ga-select__main-area">
    <div class="ga-select__placeholder">Placeholder</div>
  </div>
  <div class="ga-select__suffix">
    <!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
  </div>
</div>
```

#### Invalid Selected

```html
<div class="ga-select ga-select--invalid">
  <div class="ga-select__main-area">
    <div class="ga-select__value">Mercedes</div>
  </div>
  <div class="ga-select__suffix">
    <!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
  </div>
</div>
```

#### Disabled

```html
<div class="ga-select ga-select--disabled">
  <div class="ga-select__main-area">
    <div class="ga-select__value">Mercedes</div>
  </div>
  <div class="ga-select__suffix">
    <!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
  </div>
</div>
```

#### Clearable

```html
<div class="ga-select">
  <div class="ga-select__main-area">
    <div class="ga-select__value">Mercedes</div>
  </div>
  <div class="ga-select__suffix">
    <!-- icon: circle-x, size=16, class="ga-icon" -->
  </div>
</div>
```

#### Searchable Empty

```html
<div class="ga-select ga-select--empty ga-select--expanded">
  <div class="ga-select__main-area">
    <input type="text" class="ga-select__input" placeholder="Placeholder" />
  </div>
  <div class="ga-select__suffix">
    <!-- icon: chevron-up, size=24, class="ga-select__action-icon" -->
  </div>
</div>
```

#### Searchable Selected

```html
<div class="ga-select ga-select--expanded">
  <div class="ga-select__main-area">
    <input type="text" class="ga-select__input" placeholder="" />
    <div class="ga-select__value">Mercedes</div>
  </div>
  <div class="ga-select__suffix">
    <!-- icon: chevron-up, size=24, class="ga-select__action-icon" -->
  </div>
</div>
```

### Multi Select

#### Empty

```html
<div class="ga-select ga-select--multi ga-select--empty w-60">
  <div class="ga-select__main-area">
    <div class="ga-select__placeholder">Placeholder</div>
  </div>
  <div class="ga-select__suffix">
    <!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
  </div>
</div>
```

#### Selected

```html
<div class="ga-select ga-select--multi w-60">
  <div class="ga-select__main-area">
    <div class="ga-select__value">
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">Mercedes</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">BMW</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">Audi</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">Toyota</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">Peugeot</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">Porsche</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
    </div>
  </div>
  <div class="ga-select__suffix">
    <!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
  </div>
</div>
```

#### Disabled

```html
<div class="ga-select ga-select--multi ga-select--disabled w-60">
  <div class="ga-select__main-area">
    <div class="ga-select__value">
      <div class="ga-tag ga-tag--interactive-selected-disabled">
        <span class="ga-tag__label">Mercedes</span>
      </div>
      <div class="ga-tag ga-tag--interactive-selected-disabled">
        <span class="ga-tag__label">BMW</span>
      </div>
      <div class="ga-tag ga-tag--interactive-selected-disabled">
        <span class="ga-tag__label">Audi</span>
      </div>
      <div class="ga-tag ga-tag--interactive-selected-disabled">
        <span class="ga-tag__label">Toyota</span>
      </div>
      <div class="ga-tag ga-tag--interactive-selected-disabled">
        <span class="ga-tag__label">Peugeot</span>
      </div>
      <div class="ga-tag ga-tag--interactive-selected-disabled">
        <span class="ga-tag__label">Porsche</span>
      </div>
    </div>
  </div>
  <div class="ga-select__suffix">
    <!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
  </div>
</div>
```

#### Clearable

```html
<div class="ga-select ga-select--multi ga-select--expanded w-60">
  <div class="ga-select__main-area">
    <div class="ga-select__value">
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">Mercedes</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">BMW</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">Audi</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">Toyota</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">Peugeot</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">Porsche</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
    </div>
  </div>
  <div class="ga-select__suffix">
    <!-- icon: circle-x, size=16, class="ga-select__action-icon" -->
    <!-- icon: chevron-up, size=24, class="ga-select__action-icon" -->
  </div>
</div>
```

#### Searchable Empty

```html
<div
  class="ga-select ga-select--multi ga-select--empty ga-select--expanded w-60"
>
  <div class="ga-select__main-area">
    <input type="text" class="ga-select__input" placeholder="Placeholder" />
  </div>
  <div class="ga-select__suffix">
    <!-- icon: chevron-up, size=24, class="ga-select__action-icon" -->
  </div>
</div>
```

#### Searchable Selected

```html
<div class="ga-select ga-select--multi ga-select--expanded w-60">
  <div class="ga-select__main-area">
    <div class="ga-select__value">
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">Mercedes</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">BMW</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">Audi</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">Toyota</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">Peugeot</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">Porsche</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
    </div>
    <input type="text" class="ga-select__input" />
  </div>
  <div class="ga-select__suffix">
    <!-- icon: chevron-up, size=24, class="ga-select__action-icon" -->
  </div>
</div>
```

#### Label Hidden Selected

```html
<div class="ga-select ga-select--multi ga-select--label-hidden w-60">
  <div class="ga-select__main-area">
    <div class="ga-select__value">
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">Mercedes</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">BMW</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
    </div>
    <div class="ga-select__placeholder">Placeholder</div>
  </div>
  <div class="ga-select__suffix">
    <!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
  </div>
</div>
```

#### Label Hidden Searchable Selected

```html
<div
  class="ga-select ga-select--multi ga-select--label-hidden ga-select--expanded w-60"
>
  <div class="ga-select__main-area">
    <div class="ga-select__value">
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">Mercedes</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
      <div class="ga-tag ga-tag--interactive-selected">
        <span class="ga-tag__label">BMW</span>
        <div class="ga-tag__separator"></div>
        <!-- icon: x, size=16, class="ga-tag__icon" -->
      </div>
    </div>
    <input type="text" class="ga-select__input" placeholder="Placeholder" />
  </div>
  <div class="ga-select__suffix">
    <!-- icon: chevron-up, size=24, class="ga-select__action-icon" -->
  </div>
</div>
```