Font and theme export

Radio Buttons

Let users choose one option from a clearly labeled group.

Basic example

Radio Buttons are used when the user must make only one selection out of a group of items. The for attribute is necessary to bind our custom radio button with the input. Add the input's id as the value of the for attribute of the label.

Add radio buttons to a group by adding the name attribute along with the same corresponding value for each of the radio buttons in the group. Create disabled radio buttons by adding the disabled attribute as shown below. 

<form action="#">
  <p>
    <label>
      <input name="group1" type="radio" checked />
      <span>Red</span>
    </label>
  </p>
  <p>
    <label>
      <input name="group1" type="radio" />
      <span>Yellow</span>
    </label>
  </p>
  <p>
    <label>
      <input class="with-gap" name="group1" type="radio"  />
      <span>Green</span>
    </label>
  </p>
  <p>
    <label>
      <input name="group1" type="radio" disabled="disabled" />
      <span>Brown</span>
    </label>
  </p>
</form>

Setup

Load the kmaterialize stylesheet once in your application. See Getting started for installation and browser-script setup.

import 'kmaterialize/dist/css/materialize.css';

Give every radio in a group the same name and a different value. Wrap each radio and its text in a <label>, with the text in a <span>. No JavaScript initialization is required.

Examples and variants

Horizontal

Place radio options side by side with radio-group-horizontal. They wrap onto another line when space is limited. Tab enters the group and arrow keys change the selection, skipping disabled options.

<!-- The shared name keeps this group independent from the other examples. -->
<div class="radio-group-horizontal" role="radiogroup" aria-label="Delivery priority">
  <label>
    <input type="radio" name="horizontal-priority" value="low" checked>
    <span>Low</span>
  </label>
  <label>
    <input type="radio" name="horizontal-priority" value="normal">
    <span>Normal</span>
  </label>
  <label>
    <input type="radio" name="horizontal-priority" value="high">
    <span>High</span>
  </label>
  <label>
    <input type="radio" name="horizontal-priority" value="urgent" disabled>
    <span>Urgent (unavailable)</span>
  </label>
</div>

The radio-group-horizontal layout is included in kmaterialize. No extra CSS or JavaScript initialization is required.

With Gap

To create a radio button with a gap, add class="with-gap" to your input. See the example below. 

<p>
  <label>
    <input class="with-gap" name="group3" type="radio" checked />
    <span>Red</span>
  </label>
</p>

Validation

Give radio buttons the same name. A required group needs one selected option. Use fieldset.radio-group and a legend to label the group and keep its error message beneath the options.

These previews keep their error state visible. In your form, show errors after checking a field or submitting, then clear them when the value is valid.

For text fields, use .input-field.error, aria-invalid="true", and a message linked with aria-describedby. Remove the error state when resolved. Use aria-live="polite" for messages updated dynamically.

Required choice
Delivery method

Choose a delivery method.

<fieldset class="radio-group error" aria-describedby="validation-radio-error">
    <legend>Delivery method</legend>
    <p><label><input type="radio" name="validation-delivery" value="email" required aria-invalid="true" aria-describedby="validation-radio-error"><span>Email</span></label></p>
    <p><label><input type="radio" name="validation-delivery" value="download" required aria-invalid="true" aria-describedby="validation-radio-error"><span>Download</span></label></p>
    <p id="validation-radio-error" class="supporting-text error-text"><i class="material-icons" aria-hidden="true">error</i> Choose a delivery method.</p>
</fieldset>

Reference

Attributes

AttributePurpose
nameKey used when submitting the form.
valueValue submitted when the option is checked.
checkedInitial selection. Read the input’s checked property for its current state.
disabledPrevents interaction and excludes the control from form submission.
requiredRequires this checkbox to be checked, or an option to be selected in a radio group.

Keyboard and accessibility

Tab moves into or out of the radio group; arrow keys move between its options. Use a <fieldset class="radio-group"> with a <legend> to name a group, as shown in the validation example.