Using radio buttons, users can select one option from a group of options.
- Radio buttons are best for six or fewer options.
- For more than six options, consider a select box, which prompts users to disclose the options.
If you are using Angular, the recommended approach is to always use the
ClrRadio directive on your radio buttons to help manage the form control. By using
ClrRadio, you'll automatically be able to leverage built in validation, helper text, and layout features in forms.
While it is possible to create a radio button without a label, the cases are rare. However, it is possible by just adding
clrRadio to your radio button to wire up the directive. Notice, it is necessary to add
For anything beyond a standalone radio button, you'll need to wrap your radios with the
ClrRadioWrapper component when you include a label. This manages the label and display of the radio button for you.
To leverage helper and validation messages, you'll need to wrap all of the radios inside of a
ClrRadioContainer component. The radio button container tracks the the validations placed on a radio button, such as
required or even custom built validators in Angular. Under the hood, it looks at the
NgControl values to determine the control validity, and display the helper text or error message accordingly.
Note: the validation in this example only displays an error after you focus and leave focus without selecting a value. The easiest way to do this is to highlight the text in this paragraph, and hit tab a few times to change the focus.
Radio buttons can be placed inline by default by adding the
clrInline directive to your radio container elements. The radio buttons will wrap if there is not enough space.
A radio can be disabled by simply putting the
disabled attribute on the radio input. This does require the radio to be inside of a radio container. Also, for groups of radios you have to put the disabled attribute on the last radio and cannot disable individual ones, as Angular doesn't have support to disable individual radios in a group.
For applications that use the
ClrRadio directive and the associated
ClrRadioWrapper components there is built in support that adds accessible behavior to the control and its form. This behavior includes:
- Programmatically associating the correct label
forattribute with the
idof the input
- Automatic wiring up of the
aria-describedbybehavior with associated
aria-liveregion that can notify screen readers about changes in the control error state
- Adds the label to a general form summary for screen readers when the control is in an error state after a form submit