---
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>
    {%
      include meta.html
      colors=false
      sizes=false
      variables=false
    %}

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