<input type="radio">
<input> elements of type radio are generally used in radio groups—collections of radio buttons describing a set of related options.
Only one radio button in a given group can be selected at the same time. Radio buttons are typically rendered as small circles, which are filled or highlighted when selected.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 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
horizontalarrangementradiogroup
radio button horizontalarrangement. segmentcontro-l style to display.
PreviewFullscreen
Use cases
-
Using <input type="radio">
<input> elements of type radio are generally used in radio groups—collections of radio buttons describing a set of related options.
Cautions
- May not be supported in older browsers.
Accessibility
- Verify how this element is announced by screen readers.