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

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