Radio Button
NewChoose one option from a group using native radio buttons.
Overview
Tab to the group, then use arrow keys to select an option or Space to select the focused option.
No change event yet.
HTMLNative change event
<label>
<input avRadio type="radio" name="delivery" value="standard"
[(ngModel)]="delivery" (change)="changed($event)" />
Standard
</label>
<label>
<input avRadio type="radio" name="delivery" value="express"
[(ngModel)]="delivery" (change)="changed($event)" />
Express
</label>Reactive forms
Bind all options to the same form control and give the group a unique name.
Sizes and states
Usage and API
Import AvRadio from avero-ui. Apply avRadio to a native input with type="radio". Use FormsModule for ngModel or ReactiveFormsModule for formControl and formControlName.
Grouping. Use the same name and form value for every option in a group, and distinct names for independent groups. With formControlName, the name must match the control name. Wrap groups in fieldset with a legend, and associate each option with a label.
Events. Use the native change event. It fires for the newly selected option; programmatic writes and resets do not trigger it. Native disabled, required and value attributes retain their behavior.
Theme. Set avSize to sm, md or lg. Customize --av-radio-accent, --av-radio-background, --av-radio-border, --av-radio-focus and --av-radio-invalid.