Widely availableSupported across all major browsers. Safe to use in production.
Forms Widely available

<input type="radio">

The <input type="radio"> HTML element represents one button in a group such that only one can be chosen at a time.

Forms

Overview

The <input type="radio"> HTML element represents one button in a group such that only one can be chosen at a time.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
html.elements.input.type_radio
1
12
1
1
18
1
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML 
<fieldset>
  <legend>Gender</legend>
  <label><input type="radio" name="gender" value="male"> Male</label>
  <label><input type="radio" name="gender" value="female"> Female</label>
  <label><input type="radio" name="gender" value="other"> Other</label>
</fieldset>

Live demo

basic radio button

same name attribute in exclusive selectionoption create.

PreviewFullscreen

card typeradio button

Selectionmiddle. card hilightdisplay. with:checked

PreviewFullscreen

horizontalarrangementradiogroup

radio button horizontalarrangement. segmentcontro-l style to display.

PreviewFullscreen

Use cases

  • Using <input type="radio">

    The <input type="radio"> HTML element represents one button in a group such that only one can be chosen at a time.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Verify how this element is announced by screen readers.

Related links

Powered by web-features