eui documentation
  1. Components
  2. EuiInputRadioComponent

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
Inputs
HostBindings
HostListeners
Accessors

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
getisInvalid()

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
setisInvalid(state: BooleanInput)
Parameters :
Name Type Optional
state BooleanInput No
Returns : void
class
getclass()

Gets the CSS classes for the radio input component. Combines base classes with invalid state modifier if applicable.

Returns : string
defaultChecked
getdefaultChecked()

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
setdefaultChecked(value: BooleanInput)
Parameters :
Name Type Optional
value BooleanInput No
Returns : void
selected
getselected()

Gets whether the radio input is currently selected.

Returns : boolean
value
getvalue()

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
setvalue(value: unknown)
Parameters :
Name Type Optional
value unknown No
Returns : void

results matching ""

    No results matching ""