### File

`packages/components/eui-input-radio/eui-input-radio.component.ts`

### Description

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

Example :

    <!-- 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

Example :

    <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>

Example :

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

### With Validation

Example :

    <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

Example :

    <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

Example :

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

### Extends

`InputDirective`

### Implements

`OnInit` `DoCheck` `OnChanges` `ControlValueAccessor`

### Metadata

selector | `input[euiInputRadio]`
styleUrls | `./eui-input-radio.scss`

### Index

###### Methods

- registerOnChange
- registerOnTouched
- Optional setDisabledState
- writeValue
- getCssClasses

###### Inputs

- checked
- isInvalid
- value
- disabled
- euiDanger
- euiDisabled
- placeholder
- readonly

###### HostBindings

- attr.type
- class

###### HostListeners

- change
- keydown.space

###### Accessors

- isInvalid
- class
- defaultChecked
- selected
- value

### Constructor

`constructor()`

### Inputs

checked
Type : `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
Type : `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
Type : `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
Type : `boolean`

euiDanger
Type : `boolean`
Default value : `false`

euiDisabled
Type : `boolean`
Default value : `false`

placeholder
Type : `string | null`

readonly
Type : `any`

### HostBindings

attr.type
Type : `string`
Default value : `'radio'`

class
Type : `string`
Gets the CSS classes for the radio input component. Combines base classes with invalid state modifier if applicable.

### HostListeners

change
Arguments : `'$any($event)'`
`change(event: Event)`

Handles change events on the radio input. Updates the model value when the radio selection changes.

Parameters :

Name | Optional | Description

event

No

- The change event

keydown.space
Arguments : `'$any($event)'`
`keydown.space(event: KeyboardEvent)`

Handles space key press events. Prevents selection changes when the input is readonly.

Parameters :

Name | Optional | Description

event

No

- The keyboard event

### Methods

registerOnChange
`registerOnChange(fn: any)`

Registers a callback function that is called when the control's value changes.

Parameters :

Name | Type | Optional | Description

fn

`any`

No

- The callback function

Returns : `void`

registerOnTouched
`registerOnTouched(fn: any)`

Registers a callback function that is called when the control is touched.

Parameters :

Name | Type | Optional | Description

fn

`any`

No

- The callback function

Returns : `void`

Optional setDisabledState
`setDisabledState(isDisabled: boolean)`

Sets the disabled state of the radio input.

Parameters :

Name | Type | Optional | Description

isDisabled

`boolean`

No

- Whether the radio input should be disabled

Returns : `void`

writeValue
`writeValue(obj: string)`

Implements ControlValueAccessor.writeValue. Updates the checked state based on the form control value.

Parameters :

Name | Type | Optional | Description

obj

`string`

No

- The value to write

Returns : `void`

getCssClasses
`getCssClasses(rootClass: string)`

Parameters :

Name | Type | Optional
rootClass | `string` | No

Returns : `string`

### Accessors

isInvalid
get `isInvalid()`
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. Returns : `boolean`
set `isInvalid(state: BooleanInput)`

Parameters :

Name | Type | Optional
state | `BooleanInput` | No

Returns : `void`

class
get `class()`
Gets the CSS classes for the radio input component. Combines base classes with invalid state modifier if applicable. Returns : `string`

defaultChecked
get `defaultChecked()`
Gets or sets the default checked state of the radio input. This is different from the current checked state and represents the initial value. Returns : `any`
set `defaultChecked(value: BooleanInput)`

Parameters :

Name | Type | Optional
value | `BooleanInput` | No

Returns : `void`

selected
get `selected()`
Gets whether the radio input is currently selected. Returns : `boolean`

value
get `value()`
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. Returns : `any`
set `value(value: unknown)`

Parameters :

Name | Type | Optional
value | `unknown` | No

Returns : `void`

# results matching ""

# No results matching ""