In computing, a radio button is a circular icon in a dialog box that can be clicked with a mouse to select one option among multiple, typically mutually exclusive, options.
On this page
Definition
A radio button is a small circular element within a graphical user interface that allows the user to select one option from a predefined set of options. It gets its name from the similarity to the preset buttons on an old car radio: pressing one button deselects the previously selected button. Radio buttons are primarily used for mutually exclusive selections, meaning only one option can be selected at a time.
Examples
Print Dialog: In a print dialog box, radio buttons might allow the user to choose between printing the entire document, selected pages, or just the current page.
Survey Forms: Radio buttons are commonly used in survey forms where respondents can select one answer to each question.
Settings Menus: In software settings, radio buttons might be used to choose between different display modes, such as ‘Light Mode’ or ‘Dark Mode’.
Frequently Asked Questions
What is the difference between a radio button and a checkbox?
A radio button is designed for selecting one option from a set of options (mutually exclusive), while a checkbox allows for selecting multiple options independently.
Can a radio button be unselected?
Typically, once a radio button is selected, it can’t be deselected on its own. It can only be deselected by selecting another radio button in the same group.
Why are radio buttons used in forms?
Radio buttons are used in forms to provide users with a clear and intuitive method of selecting one option from a list of mutually exclusive choices.
How do radio buttons work in programming?
In HTML, radio buttons are created using the “input” tag with the type attribute set to “radio.” They must share a common “name” attribute to be grouped together.
Are radio buttons accessible?
Yes, radio buttons can be accessible if implemented correctly. Proper labels and ARIA attributes should be used to ensure screen reader compatibility.
Related Terms
Checkbox
A checkbox is a square box that can be either checked or unchecked to select or deselect one or multiple options in a form.
Dropdown Menu
A dropdown menu allows users to select one option from a list by clicking on a box, which expands to show the complete list of available choices.
Dialog Box
A dialog box is a small window that prompts the user to make decisions or enter information before they can proceed.
Don’t Make Me Think by Steve Krug - A guide on web usability, including user interface elements like radio buttons.
Forms that Work by Caroline Jarrett and Gerry Gaffney - Focuses on creating efficient and user-friendly forms.
The Design of Everyday Things by Don Norman - Explains the principles of user-centered design.
Fundamentals of Radio Button: Computers and the Internet Basics Quiz
### What type of selection does a radio button allow in a form?
- [x] Mutually exclusive selection
- [ ] Multiple independent selections
- [ ] Hierarchical selection
- [ ] Binary selection
> **Explanation:** Radio buttons are used for mutually exclusive selections, allowing the user to select only one option from a set.
### How are radio buttons typically indicated in HTML?
- [ ] ``
- [x] ``
- [ ] ``
- [ ] ``
> **Explanation:** In HTML, radio buttons are typically created using the `` tag with the `type` attribute set to `"radio"`.
### Can multiple radio buttons in the same group be selected at the same time?
- [ ] Yes, multiple selections are allowed.
- [x] No, only one selection can be made.
- [ ] It depends on the browser.
- [ ] Only if they are nested in different forms.
> **Explanation:** Only one radio button in the same group (indicated by having the same `name` attribute) can be selected at a time.
### What is the visual appearance of a radio button?
- [ ] A square box with a check
- [x] A small circle that can be filled in
- [ ] A down arrow with a list
- [ ] A toggle switch
> **Explanation:** A radio button is visually represented as a small circle that can be filled in to indicate that it has been selected.
### Why are radio buttons preferred for mutually exclusive options?
- [x] They prevent multiple selections.
- [ ] They allow for ease of data entry.
- [ ] They are visually distinct.
- [ ] They reduce the likelihood of errors.
> **Explanation:** Radio buttons are preferred for mutually exclusive options because they ensure that only one option can be selected at a time.
### What common feature do radio buttons need to ensure exclusive selection?
- [ ] Different `id` attributes
- [x] The same `name` attribute
- [ ] Unique `value` attributes
- [ ] A shared `class` attribute
> **Explanation:** Radio buttons must share the same `name` attribute to be grouped together, ensuring exclusive selection within that group.
### How can a radio button be deselected once it is selected?
- [x] By selecting another radio button in the same group
- [ ] By clicking on it again
- [ ] By using the `reset` button in the form
- [ ] By right-clicking on it
> **Explanation:** A radio button can be deselected only by selecting another radio button in the same group. They cannot be unselected individually.
### Which user interface element allows for selection of multiple options?
- [ ] Radio Button
- [x] Checkbox
- [ ] Dropdown Menu
- [ ] Toggle Switch
> **Explanation:** A checkbox allows for the selection of multiple, independent options, whereas a radio button allows for a single, exclusive selection.
### What ensures that a group of radio buttons is recognized as one selection set?
- [ ] Unique `id` attributes
- [ ] Consistent `class` attributes
- [x] A shared `name` attribute
- [ ] Identical `value` attributes
> **Explanation:** A group of radio buttons must share the same `name` attribute to be recognized as part of one selection set, allowing for mutually exclusive selection.
### What should you consider for radio buttons to be accessible?
- [ ] Only include one button per group
- [x] Provide proper labels and ARIA attributes
- [ ] Make them larger
- [ ] Include visual and sound feedback
> **Explanation:** For radio buttons to be accessible, it’s crucial to provide proper labels and ARIA attributes so that screen readers can interpret them correctly.
Thank you for learning about radio buttons. Use your new knowledge to create intuitive and user-friendly interfaces!
Discover comprehensive accounting definitions and practical insights. Empowering students and professionals with clear and concise explanations for a better understanding of financial terms.
