# EuiInputRadioComponent

**Type:** component



Radio input component for selecting a single value from a set of mutually exclusive options.
Integrates with Angular forms (both reactive and template-driven) and provides custom EUI styling.
Implements ControlValueAccessor for seamless form integration with validation states and error handling.
Automatically manages checked state, value binding, and form control synchronization.
Must be applied as an attribute directive to native HTML radio input elements.

### Basic Usage
```html
<!-- Template-driven forms -->
<div>
  <input euiInputRadio type="radio" name="size" value="small" [(ngModel)]="selectedSize" id="size-small" />
  <label for="size-small">Small</label>
</div>
<div>
  <input euiInputRadio type="radio" name="size" value="medium" [(ngModel)]="selectedSize" id="size-medium" />
  <label for="size-medium">Medium</label>
</div>
<div>
  <input euiInputRadio type="radio" name="size" value="large" [(ngModel)]="selectedSize" id="size-large" />
  <label for="size-large">Large</label>
</div>
```

### Reactive Forms
```html
<form [formGroup]="myForm">
  <div>
    <input euiInputRadio type="radio" formControlName="plan" value="basic" id="plan-basic" />
    <label for="plan-basic">Basic Plan</label>
  </div>
  <div>
    <input euiInputRadio type="radio" formControlName="plan" value="premium" id="plan-premium" />
    <label for="plan-premium">Premium Plan</label>
  </div>
</form>
```

```typescript
myForm = this.fb.group({
  plan: ['basic', Validators.required]
});
```

### With Validation
```html
<form [formGroup]="form">
  <div>
    <input euiInputRadio type="radio" formControlName="option" value="yes" id="opt-yes" />
    <label for="opt-yes">Yes</label>
  </div>
  <div>
    <input euiInputRadio type="radio" formControlName="option" value="no" id="opt-no" />
    <label for="opt-no">No</label>
  </div>
  <div *ngIf="form.get('option')?.invalid && form.get('option')?.touched" class="error">
    Please select an option
  </div>
</form>
```

### Disabled State
```html
<input euiInputRadio type="radio" name="status" value="active" [disabled]="true" id="status-active" />
<label for="status-active">Active (disabled)</label>
```

### Accessibility
- Always associate radio inputs with labels using for/id attributes
- Group related radio buttons with the same name attribute
- Use fieldset and legend for radio button groups
- Provide clear, descriptive labels for each option
- Invalid state automatically applies aria-invalid
- Keyboard navigation: Tab to focus, Space to select

### Notes
- Radio buttons with the same name are mutually exclusive
- Automatically generates unique IDs if not provided
- Invalid state styling applied when form control is invalid
- Supports readonly mode to prevent changes
- Value can be string, number, or boolean
- Integrates with Angular form validation
- Use with eui-label components for consistent styling

```html
<input euiInputRadio type="radio" name="option" value="1" [(ngModel)]="selected" id="opt-1" />
<label for="opt-1">Option 1</label>
```

**Selector:** `input[euiInputRadio]`

## Inputs
- **checked**: `any` - Gets or sets the default checked state of the radio input. This is different from the current checked state and represents the initial value.
- **isInvalid**: `boolean` - Gets or sets whether the radio input is in an invalid state. This can be set manually or will be automatically set when used with form validation.
- **value**: `any` - Gets or sets the value of the radio input. The value can be of any type and will be used when the radio is selected in a form group.
- **disabled**: `boolean` - 
- **euiDanger**: `boolean` - 
- **euiDisabled**: `boolean` - 
- **placeholder**: `string | null` - 
- **readonly**: `any` -