mirror of
https://github.com/jgthms/bulma.git
synced 2024-12-12 13:28:30 +00:00
120 lines
2.7 KiB
HTML
120 lines
2.7 KiB
HTML
---
|
|
title: Checkbox
|
|
layout: docs
|
|
theme: library
|
|
doc-tab: form
|
|
doc-subtab: checkbox
|
|
breadcrumb:
|
|
- home
|
|
- documentation
|
|
- form
|
|
- form-checkbox
|
|
meta:
|
|
colors: false
|
|
sizes: false
|
|
variables: false
|
|
---
|
|
|
|
{% 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 %} {% capture list_of_checkboxes %}
|
|
<div class="checkboxes">
|
|
<label class="checkbox">
|
|
<input type="checkbox" />
|
|
Monday
|
|
</label>
|
|
|
|
<label class="checkbox">
|
|
<input type="checkbox" />
|
|
Tuesday
|
|
</label>
|
|
|
|
<label class="checkbox">
|
|
<input type="checkbox" />
|
|
Wednesday
|
|
</label>
|
|
|
|
<label class="checkbox">
|
|
<input type="checkbox" />
|
|
Thursday
|
|
</label>
|
|
|
|
<label class="checkbox">
|
|
<input type="checkbox" />
|
|
Friday
|
|
</label>
|
|
|
|
<label class="checkbox">
|
|
<input type="checkbox" checked />
|
|
Saturday
|
|
</label>
|
|
|
|
<label class="checkbox">
|
|
<input type="checkbox" checked />
|
|
Sunday
|
|
</label>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
The <code>checkbox</code> class is a simple wrapper around the
|
|
<code><input type="checkbox"></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 bd-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 bd-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 bd-highlight-full">
|
|
{% highlight html -%} {{- checkbox_disabled_example -}} {%- endhighlight %}
|
|
</div>
|
|
</div>
|
|
|
|
{% include docs/elements/anchor.html name="List of Checkboxes" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
If you want to list several checkbox elements, wrap them in a
|
|
<code><div class="checkboxes"></code> element:
|
|
</p>
|
|
</div>
|
|
|
|
<div class="block">{{- list_of_checkboxes -}}</div>
|
|
|
|
{% highlight html -%} {{- list_of_checkboxes -}} {%- endhighlight %}
|