The radio button is a form element comprising a series of items that make a list of options that allow the user to select options that are mutually exclusive of each other. Users may only select a single radio button within a series of items that make a list.
Use radio buttons when you want users to see all available multual exclusive options and the list of options is small.
Use radio buttons for six or fewer options.
Use a select box for more than six options, or a datalist for more than 13 options. Both prompt users to disclose the options.
Use when interactive and ready for input.
Use when not interactive. For example, when a user does not have permissions to edit the input.
Use to communicate a user or system error. This validation can happen when the user moves away from the input or after attempting to submit a form. For example, invalid input or username already taken.
Use to provide real-time feedback immediately after a user’s input. For example, username available.
Radio buttons are available in vertical, horizontal, and compact layout. See more layout guidelines on the form page.