mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
117 lines
2.9 KiB
HTML
117 lines
2.9 KiB
HTML
---
|
|
title: Radio button
|
|
layout: documentation
|
|
doc-tab: form
|
|
doc-subtab: radio
|
|
---
|
|
|
|
{% capture radio_example %}
|
|
<div class="control">
|
|
<label class="radio">
|
|
<input type="radio" name="answer">
|
|
Yes
|
|
</label>
|
|
<label class="radio">
|
|
<input type="radio" name="answer">
|
|
No
|
|
</label>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{% capture radio_default_example %}
|
|
<div class="control">
|
|
<label class="radio">
|
|
<input type="radio" name="foobar">
|
|
Foo
|
|
</label>
|
|
<label class="radio">
|
|
<input type="radio" name="foobar" checked>
|
|
Bar
|
|
</label>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{% capture radio_disabled_example %}
|
|
<div class="control">
|
|
<label class="radio">
|
|
<input type="radio" name="rsvp">
|
|
Going
|
|
</label>
|
|
<label class="radio">
|
|
<input type="radio" name="rsvp">
|
|
Not going
|
|
</label>
|
|
<label class="radio" disabled>
|
|
<input type="radio" name="rsvp" disabled>
|
|
Maybe
|
|
</label>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{% include subnav/subnav-form.html %}
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<h1 class="title">Radio</h1>
|
|
<h2 class="subtitle">
|
|
The mutually exclusive <strong>radio buttons</strong> in their native format
|
|
</h2>
|
|
{%
|
|
include meta.html
|
|
colors=false
|
|
sizes=false
|
|
variables=false
|
|
%}
|
|
|
|
<hr>
|
|
|
|
<div class="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>
|
|
|
|
<div class="columns">
|
|
<div class="column is-half">
|
|
{{radio_example}}
|
|
</div>
|
|
<div class="column is-half highlight-full">
|
|
{% highlight html %}{{radio_example}}{% endhighlight %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="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>
|
|
|
|
<div class="columns">
|
|
<div class="column is-half">
|
|
{{radio_default_example}}
|
|
</div>
|
|
<div class="column is-half highlight-full">
|
|
{% highlight html %}{{radio_default_example}}{% endhighlight %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="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>
|
|
|
|
<div class="columns">
|
|
<div class="column is-half">
|
|
{{radio_disabled_example}}
|
|
</div>
|
|
<div class="column is-half highlight-full">
|
|
{% highlight html %}{{radio_disabled_example}}{% endhighlight %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|