December 19, 2016

Materialize Radio Button

Materialize Radio Button: Radio button are basically used to select one option from the given option. It is very simple to create radio button in materialize framework. Here in this tutorial we are going to explain how you can create radio buttons in materialize. You can also use our online demo run and see the output.

Materialize Radio Button Example

Let us create simple radio buttons-

Materialize Radio Button Example:

 <p>
      <input name="gender" type="radio" id="gender_id_red" />
      <label for="gender_id_red">Male</label>
    </p>
    <p>
      <input name="gender" type="radio" id="gender_id_yellow" />
      <label for="gender_id_yellow">Female</label>
    </p>

Try it »

In the above example we have created simple radio button which allows user to select gender from the male and female option. If you run the above example it will produce output something like this –

Radio Buttons With Gap

If you want to add gap inside the radio button, just add class=”with-gap” to the radio button. Here a simple example of radio buttons with gap-

Materialize Radio Button Gap Example:

 <p>
      <input name="gender" class="with-gap" type="radio" id="gender_id_red" />
      <label for="gender_id_red">Male</label>
    </p>
    <p>
      <input name="gender" class="with-gap" type="radio" id="gender_id_yellow" />
      <label for="gender_id_yellow">Female</label>
    </p>

Try it »

If you run the above example it will produce the output of radio buttons with gap as below-

Materialize Radio Button With Gap Example