---
title: Checkbox
layout: documentation
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 %}

<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>