Usage #
Examples #
Basic #
Selects a single option from a group of mutually exclusive choices.
Group #
RadioButton is used as a controlled input with value and ngModel properties.
Dynamic #
RadioButtons can be generated using a list of values.
Card #
RadioButtons can be displayed in a card style.
Sizes #
RadioButton provides small and large sizes as alternatives to the base.
Filled #
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
Disabled #
When disabled is present, the element cannot be edited and focused.
Invalid #
The invalid state is applied using the invalid property to indicate failed validation, which can be integrated with Angular Forms.
Forms #
Signal Forms #
Template Driven #
Reactive Forms #
Accessibility #
Screen Reader
RadioButton component uses a hidden native radio button element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy, ariaLabel props.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the checked radio button, if there is none within the group then first radio button receives the focus. |
| left arrowup arrow | Moves focus to the previous radio button, if there is none then last radio button receives the focus. |
| right arrowdown arrow | Moves focus to the next radio button, if there is none then first radio button receives the focus. |
| space | If the focused radio button is unchecked, changes the state to checked. |