# Radio Button

## Visual Structure

```
ga-radio-button [--invalid]
  ├── ga-radio-button__native
  ├── ga-radio-button__marker
  └── ga-radio-button__label (optional)
```

## Elements Hierarchy

### Core Block

- `ga-radio-button` - Main container for the radio button component

### Mandatory Elements

- `ga-radio-button__native` - Native HTML radio input element (visually hidden)
- `ga-radio-button__marker` - Visual circular marker for the radio button state

### Optional Elements

- `ga-radio-button__label` - Text label for the radio button

### Modifiers

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

## Additional Elements

- `ga-radio-group` - Container for grouping multiple radio buttons with proper spacing

## Examples

### Default

```html
<label class="ga-radio-button">
  <input
    type="radio"
    class="ga-radio-button__native"
    name="radio1"
    checked=""
  />
  <div class="ga-radio-button__marker"></div>
  <div class="ga-radio-button__label">Option A</div>
</label>
```

### Disabled

```html
<label class="ga-radio-button">
  <input type="radio" class="ga-radio-button__native" disabled="" checked="" />
  <div class="ga-radio-button__marker"></div>
  <div class="ga-radio-button__label">Option A</div>
</label>
```

### Invalid

```html
<label class="ga-radio-button ga-radio-button--invalid">
  <input type="radio" class="ga-radio-button__native" required="" />
  <div class="ga-radio-button__marker"></div>
  <div class="ga-radio-button__label">Option A</div>
</label>
```

### No Label

```html
<div class="ga-radio-button">
  <input type="radio" class="ga-radio-button__native" name="radio2" />
  <div class="ga-radio-button__marker"></div>
</div>
```

### Radio Group

```html
<div class="ga-radio-group">
  <label class="ga-radio-button">
    <input
      type="radio"
      class="ga-radio-button__native"
      name="radio3"
      checked=""
    />
    <div class="ga-radio-button__marker"></div>
    <div class="ga-radio-button__label">Option A</div>
  </label>
  <label class="ga-radio-button">
    <input type="radio" class="ga-radio-button__native" name="radio3" />
    <div class="ga-radio-button__marker"></div>
    <div class="ga-radio-button__label">Option B</div>
  </label>
  <label class="ga-radio-button">
    <input type="radio" class="ga-radio-button__native" name="radio3" />
    <div class="ga-radio-button__marker"></div>
    <div class="ga-radio-button__label">Option C</div>
  </label>
</div>
```