Skip to content
Surf Wiki
Save to docs
general/graphical-control-elements

From Surf Wiki (app.surf) — the open knowledge base

Radio button

Graphical user interface control element

Radio button

Graphical user interface control element

Four options on a radio button. When a new option is chosen, the previously chosen option is unselected.

A radio button or option button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options. The singular property of a radio button makes it distinct from checkboxes, where the user can select and unselect any number of items.

Radio buttons are arranged in groups of two or more and displayed on screen as, for example, a list of circular holes that can contain white space (for unselected) or a dot (for selected). Each radio button is normally accompanied by a label describing the choice that the radio button represents. The choices are mutually exclusive; when the user selects a radio button, any previously selected radio button in the same group becomes deselected (making it so only one can be selected). Selecting a radio button is done by clicking the mouse on (or touching the screen over) the button, or the caption, or by using a keyboard shortcut.

Etymology

A radio with a row of five pop-out buttons

Radio buttons are named after the physical buttons that were used on radios to select preset stations. When one of the buttons is pressed, the other buttons pop out while leaving the pushed one pressed in.

HTML

In web forms, the HTML element is used to display a radio button. Example:

<form>
    <input type="radio" name="season" value="winter" id="winter" checked>
    <label for="winter">Winter</label>
    <input type="radio" name="season" value="spring" id="spring">
    <label for="spring">Spring</label>
    <input type="radio" name="season" value="summer" id="summer">
    <label for="summer">Summer</label>
    <input type="radio" name="season" value="autumn" id="autumn">
    <label for="autumn">Autumn</label>
</form>
A group of attributes is defined by name. In one group, only one radio button can be chosen.

Unicode

Version of the Unicode standard includes a character designated to represent a radio button, at code (U, found in the Symbols and Pictographs section. Similar characters are the mathematical operator as well as and .

The font Wingdings 2 contains at position 153 and 158 glyphs that look like radio buttons.

References

References

  1. "About Option Buttons".
  2. "The history of a radio-button".
  3. "Radio Buttons".
Info: Wikipedia Source

This article was imported from Wikipedia and is available under the Creative Commons Attribution-ShareAlike 4.0 License. Content has been adapted to SurfDoc format. Original contributors can be found on the article history page.

Want to explore this topic further?

Ask Mako anything about Radio button — get instant answers, deeper analysis, and related topics.

Research with Mako

Free with your Surf account

Content sourced from Wikipedia, available under CC BY-SA 4.0.

This content may have been generated or modified by AI. CloudSurf Software LLC is not responsible for the accuracy, completeness, or reliability of AI-generated content. Always verify important information from primary sources.

Report