bulma/docs/documentation/form/checkbox.html

76 lines
1.7 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
2018-04-09 15:15:58 +00:00
breadcrumb:
- home
- documentation
- form
- form-checkbox
meta:
colors: false
sizes: false
variables: false
2017-07-17 18:41:58 +00:00
---
{% 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-04-09 15:15:58 +00:00
<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>
2017-07-17 18:41:58 +00:00
2018-04-09 15:15:58 +00:00
<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>
2017-07-17 18:41:58 +00:00
2018-04-09 15:15:58 +00:00
<div class="content">
<p>
You can add <strong>links</strong> to your checkbox, or even <strong>disable</strong> it.
</p>
</div>
2017-07-17 18:41:58 +00:00
2018-04-09 15:15:58 +00:00
<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>
2017-07-17 18:41:58 +00:00
2018-04-09 15:15:58 +00:00
<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 %}
2017-07-17 18:41:58 +00:00
</div>
2018-04-09 15:15:58 +00:00
</div>