bulma/docs/documentation/form/checkbox.html
2017-07-29 18:24:07 +01:00

80 lines
1.9 KiB
HTML

---
title: Checkbox
layout: documentation
doc-tab: form
doc-subtab: checkbox
---
{% capture checkbox_example %}
<label class="checkbox">
<input type="checkbox">
Remember me
</label>
{% endcapture %}
{% capture checkbox_link_example %}
<label class="checkbox">
<input type="checkbox">
I agree to the <a href="#">terms and conditions</a>
</label>
{% endcapture %}
{% capture checkbox_disabled_example %}
<label class="checkbox" disabled>
<input type="checkbox" disabled>
Save my preferences
</label>
{% endcapture %}
{% include subnav-form.html %}
<section class="section">
<div class="container">
<h1 class="title">Checkbox</h1>
<h2 class="subtitle">
The 2-state <strong>checkbox</strong> in its native format
</h2>
<hr>
<div class="content">
<p>
The <code>checkbox</code> class is a simple wrapper around the <code>&lt;input type="checkbox"&gt;</code> HTML element. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
</p>
</div>
<div class="columns">
<div class="column is-half">
{{checkbox_example}}
</div>
<div class="column is-half highlight-full">
{% highlight html %}{{checkbox_example}}{% endhighlight %}
</div>
</div>
<div class="content">
<p>
You can add <strong>links</strong> to your checkbox, or even <strong>disable</strong> it.
</p>
</div>
<div class="columns">
<div class="column is-half">
{{checkbox_link_example}}
</div>
<div class="column is-half highlight-full">
{% highlight html %}{{checkbox_link_example}}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column is-half">
{{checkbox_disabled_example}}
</div>
<div class="column is-half highlight-full">
{% highlight html %}{{checkbox_disabled_example}}{% endhighlight %}
</div>
</div>
</div>
</section>