Skip to main content
Frontend Glossary

UI components · Form input

Radio

Also called: Radio button, Radio group, Option button

A group of round options where only one can be selected, and picking a new one deselects the old one. Good for 2 to 5 mutually exclusive options.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

For "Billing cycle," use a horizontal radio group: Monthly, Quarterly, Yearly. Select Yearly by default and add a small "Save 20%" tag after it. The selected option shows a solid dot in the circle and bold text. Clicking the label should also select it, and the arrow keys should move between options.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Radio is what you need.

Use Radio when

  • 2 to 5 mutually exclusive options that users should see and compare without opening anything
  • A single choice that needs a clear default, like shipping method or billing cycle
  • Options that each need a line of description, like choosing a plan or a shipping method

Pick something else when

  • Options where several can be picked at once

    Use insteadCheckbox

  • More than 6 options that take too much room when laid out

    Use insteadSelect

  • Only on and off states that take effect immediately

    Use insteadSwitch

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    A radio group with no default, so users submit without choosing and get an error

  2. 02

    Using two radio buttons for a "Yes / No" setting that takes effect immediately, when one switch would do

  3. 03

    Radio buttons in the same group without a shared name, so several can be selected at once

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A group of small circles with text labels. The selected circle has a solid dot. Options in the same group share one name so only one can be selected.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

Radio buttons always come in groups, and only one in a group can be selected. Pick "Monthly" and "Yearly" is automatically deselected. Each option is a small circle on the left and text on the right, and the selected circle gets a solid dot in the middle. A radio group usually has a default selection, and clicking a selected option again doesn't deselect it.

The difference from a Checkbox is that it's single choice only, and it's round, not square. Compared with a Select, radio buttons lay out every option so users can compare them without opening anything, which suits 2 to 5 options. For a setting with just on and off that takes effect immediately, use a Switch. When the options are styled as a row of side-by-side toggle buttons, it's usually called a Segmented Control.

Developer info
Term ID
component-radio
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • input[type="radio"]
  • [role="radio"]
  • .ant-radio-wrapper
  • .el-radio
  • [class*="MuiRadio-root"]
  • .arco-radio
  • .t-radio
  • .n-radio
  • [data-slot="radio-group-item"]
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026