--- title: Radio button layout: documentation doc-tab: form doc-subtab: radio --- {% capture radio_example %}
{% endcapture %} {% capture radio_default_example %}
{% endcapture %} {% capture radio_disabled_example %}
{% endcapture %} {% include subnav-form.html %}

Radio

The mutually exclusive radio buttons in their native format


The radio class is a simple wrapper around the <input type="radio"> HTML elements. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.

Make sure the linked radio buttons have the same value for their name HTML attribute.

{{radio_example}}
{% highlight html %}{{radio_example}}{% endhighlight %}

You can check a radio button by default by adding the checked HTML attribute to the <input> element.

{{radio_default_example}}
{% highlight html %}{{radio_default_example}}{% endhighlight %}

You can add disable a radio button by adding the disabled HTML attribute to both the <label> and the <input>.

{{radio_disabled_example}}
{% highlight html %}{{radio_disabled_example}}{% endhighlight %}