The Materialize Radio Buttons

The radio buttons are used when you want users to select one option from the available group of options. The radio group is created by using the name attribute with the same name in a form.

The materialize CSS makes simple looking radio buttons styled nicely with default green fill color. You may also create radio button with gap by using a built-in class.

See the following section for live demos of different styles for radio buttons using Materialize CSS framework.

The example of radio buttons in Materialize

Just like the ordinary radio button, the materialize radio is created by using the <input type=”radio”> tag. The style is applied automatically if you have included the materialize.min.css. To make a radio group, use the name tag with the same name for each radio button as in the following example:

materialize radio button

See online demo and code

The markup:

A demo of radio button with the gap

Just add the class=”with-gap” in the <input> tag for radio button for creating radio button with green circle and gap between the outer border. Have a look at the example where I applied this class in above example’s markup:

materialize radio button gap

See online demo and code

The code:

Creating disabled radio button example

To make a radio button disabled, use the disabled=”disabled” attribute in the <input> tag of type=radio. For example:

<input class=”with-gap” name=”yourchoice” type=”radio” disabled=”disabled”/>

See the example online where third radio button is disabled:

See online demo and code

Modifying the circle and border color example

For changing the default green fill color for the radio for the gap or without gap style, you may override the existing CSS with your color properties.

The following example uses the red color for the fill color along with the border. The border is for radio with the gap. See both styles in this demo along with the complete code, particularly, the <style> section:

radio button colors

See online demo and code

The CSS:

The markup:

Must place the CSS for overriding the default style after the reference of the materialize.min.css file.