# Form Field

## Visual Structure

```
ga-form-field
  ├── ga-form-field__label [--defined|--disabled]
  │   ├── ga-form-field__label-text
  │   └── ga-form-field__label-state (optional)
  ├── [placeholder]
  └── ga-form-field__info (optional)
```

## Elements Hierarchy

### Core Block

- `ga-form-field` - Main container for the entire form field component

### Mandatory Elements

- `ga-form-field__label` - Container for the label elements
- `ga-form-field__label-text` - The text content of the form field label
- `[placeholder]` - Insert form control here (e.g. `ga-input`, `ga-select`, etc.)

### Optional Elements

- `ga-form-field__label-state` - Additional text for the label (e.g., "optional")
- `ga-form-field__info` - Container for additional information or validation messages

### Modifiers

- `ga-form-field__label--defined` - Styles the label text with a dotted underline and interactive colors
- `ga-form-field__label--disabled` - Styles the label as disabled/non-interactive

## Examples

### Regular

```html
<div class="ga-form-field">
  <label class="ga-form-field__label" for="input1">
    <span class="ga-form-field__label-text">Label</span>
  </label>
  <div class="ga-input">
    <input id="input1" type="text" placeholder="Text" />
  </div>
</div>
```

### With Info

```html
<div class="ga-form-field">
  <label class="ga-form-field__label" for="input2">
    <span class="ga-form-field__label-text">Label</span>
  </label>
  <div class="ga-input">
    <input id="input2" type="text" placeholder="Text" />
  </div>
  <div class="ga-form-field__info">
    <!-- icon: triangle-alert, size=16, class="ga-icon" -->
    Use special characters if available.
  </div>
</div>
```

### Label With Definition

```html
<div class="ga-form-field">
  <label
    class="ga-form-field__label ga-form-field__label--defined"
    for="input3"
    tabindex="0"
  >
    <span class="ga-form-field__label-text">Label</span>
    <span class="ga-form-field__label-state">(optional)</span>
  </label>
  <div class="ga-input">
    <input id="input3" type="text" placeholder="Text" />
  </div>
</div>
```

### Disabled

```html
<div class="ga-form-field">
  <label
    class="ga-form-field__label ga-form-field__label--defined ga-form-field__label--disabled"
    for="input4"
  >
    <span class="ga-form-field__label-text">Label</span>
    <span class="ga-form-field__label-state">(optional)</span>
  </label>
  <div class="ga-input">
    <input id="input4" type="text" placeholder="Text" disabled="" />
  </div>
</div>
```