Purchase Order Replace Radio Button Groups For Free

A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.

Radio buttons, also called option buttons, let users select one option from a collection of two or more mutually exclusive, but related, options. Radio buttons are always used in groups, and each option is represented by one radio button in the group.

Always Offer a Default Selection One of the 10 heuristics of UI design says that users should be able to undo (and redo) their actions. This means enabling people to set a UI control back to its original state. In case of radio buttons this means that radio buttons should always have exactly one option pre-selected.

Only one radio button in a group can be selected at the same time. Note: The radio group must have share the same name (the value of the name attribute) to be treated as a group.

Radio buttons can be lain out horizontally as well as vertically. Button groups could be set up to perform the same way as radio buttons (logically XOR). In the end you have to design for the way users will understand the UI regardless of the technology required to achieve the result.

All radio groups require a group label of some kind. The classic method is using <fieldset> and <legend> . The ARIA method of role="radiogroup" and aria-labelledby can also be used.

Defining a radio group A radio group is defined by giving each of radio buttons in the group the same name . Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.

Defining Radio Group in HTML We can define a group for radio buttons by giving each radio button the same name. As and when the user selects a particular option from this group, other options are deselected. Following is an example of radio buttons with different names within a form.