The mutually exclusive <strong>radio buttons</strong> in their native format
</h2>
<hr>
<divclass="content">
<p>
The <code>radio</code> class is a simple wrapper around the <code><input type="radio"></code> HTML elements. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
</p>
<p>
Make sure the linked radio buttons have the <strong>same value</strong> for their <code>name</code> HTML attribute.
</p>
</div>
<divclass="columns">
<divclass="column is-half">
{{radio_example}}
</div>
<divclass="column is-half highlight-full">
{% highlight html %}{{radio_example}}{% endhighlight %}
</div>
</div>
<divclass="content">
<p>
You can check a radio button by <strong>default</strong> by adding the <code>checked</code> HTML attribute to the <code><input></code> element.
</p>
</div>
<divclass="columns">
<divclass="column is-half">
{{radio_default_example}}
</div>
<divclass="column is-half highlight-full">
{% highlight html %}{{radio_default_example}}{% endhighlight %}
</div>
</div>
<divclass="content">
<p>
You can add <strong>disable</strong> a radio button by adding the <code>disabled</code> HTML attribute to both the <code><label></code> and the <code><input></code>.
</p>
</div>
<divclass="columns">
<divclass="column is-half">
{{radio_disabled_example}}
</div>
<divclass="column is-half highlight-full">
{% highlight html %}{{radio_disabled_example}}{% endhighlight %}