# Input

## Visual Structure

```
ga-input [--invalid|--success]
  ├── [icon prefix] (optional)
  ├── input
  └── [icon suffix] (optional)
```

## Elements Hierarchy

### Core Block

- `ga-input` - Main container for the entire input component

### Mandatory Elements

- `input` - The native HTML input element

### Optional Elements

- Icon prefix - An icon placed before the input text
- Icon suffix - An icon placed after the input text

### Modifiers

- `ga-input--invalid` - Styles the input to indicate validation error
- `ga-input--success` - Styles the input to indicate successful validation

## Examples

### Regular

```html
<div class="ga-input"><input type="text" placeholder="Placeholder" /></div>
```

### With Prefix Icon

```html
<div class="ga-input">
  <!-- icon: mail, size=24 -->
  <input type="text" placeholder="Placeholder" />
</div>
```

### With Suffix Icon

```html
<div class="ga-input">
  <input type="text" placeholder="Placeholder" />
  <!-- icon: circle-x, size=16 -->
</div>
```

### Hover

```html
<div class="ga-input"><input type="text" placeholder="Placeholder" /></div>
<div class="ga-input">
  <input type="text" placeholder="Placeholder" readonly="" value="Filled" />
</div>
```

### Disabled

```html
<div class="ga-input">
  <input type="text" placeholder="Placeholder" disabled="" />
</div>
<div class="ga-input">
  <input type="text" placeholder="Placeholder" disabled="" value="Filled" />
</div>
```

### Invalid

```html
<div class="ga-input ga-input--invalid">
  <input type="text" placeholder="Placeholder" />
  <!-- icon: triangle-alert, size=24 -->
</div>
<div class="ga-input ga-input--invalid">
  <input type="text" placeholder="Placeholder" readonly="" value="Filled" />
  <!-- icon: triangle-alert, size=24 -->
</div>
```

### Success

```html
<div class="ga-input ga-input--success">
  <input type="text" placeholder="Placeholder" />
</div>
<div class="ga-input ga-input--success">
  <input type="text" placeholder="Placeholder" readonly="" value="Filled" />
</div>
```