bulma/docs/documentation/form/checkbox.html

86 lines
2.0 KiB
HTML
Raw Normal View History

2017-07-17 18:41:58 +00:00
---
2017-07-29 12:02:00 +00:00
title: Checkbox
2017-07-17 18:41:58 +00:00
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 %}
2018-03-26 13:46:39 +00:00
{% include subnav/subnav-form.html %}
2017-07-17 18:41:58 +00:00
<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>
2017-07-29 14:54:51 +00:00
{%
include meta.html
colors=false
sizes=false
variables=false
%}
2017-07-17 18:41:58 +00:00
<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>