GoComponents

# Checkbox

A checkbox lets users select one or more values as part of a form process.

NOTE

The checkbox component can ONLY be used as a single element

# Default

<div class="goco-c-checkbox">
  <input class="goco-c-checkbox__input" id="checkbox-default" type="checkbox" />
  <label class="goco-c-checkbox__label" for="checkbox-default">
    <span class="goco-c-checkbox__text">Checkbox</span>
  </label>
</div>

# Custom Label Content

Custom label content can be passed to the checkbox by replacing the <span class="goco-c-checkbox__text"> element within <label class="goco-c-checkbox__label">

NOTE

Any custom markup passed to the checkbox will need to be independently styled.

<div class="goco-c-checkbox">
  <input class="goco-c-checkbox__input" id="checkbox-custom-label" type="checkbox" />
  <label class="goco-c-checkbox__label" for="checkbox-custom-label">
    <div>Custom label content<div> 
  </label>
</div>

# Checked

<div class="goco-c-checkbox">
  <input class="goco-c-checkbox__input" id="checkbox-checked" type="checkbox" checked />
  <label class="goco-c-checkbox__label" for="checkbox-checked">
    <span class="goco-c-checkbox__text">Checkbox</span>
  </label>
</div>

# Dark

<div class="goco-c-checkbox goco-c-checkbox--dark">
  <input class="goco-c-checkbox__input" id="checkbox-dark" type="checkbox" />
  <label class="goco-c-checkbox__label" for="checkbox-dark">
    <span class="goco-c-checkbox__text">Checkbox</span>
  </label>
</div>

# Sizes

There is an additional size of the checkbox available, small.

# Small

<div class="goco-c-checkbox goco-c-checkbox--small">
  <input class="goco-c-checkbox__input" id="checkbox-small" type="checkbox" />
  <label class="goco-c-checkbox__label" for="checkbox-small">
    <span class="goco-c-checkbox__text">Checkbox</span>
  </label>
</div>

# Disabled

<div class="goco-c-checkbox">
  <input class="goco-c-checkbox__input" id="checkbox-disabled" type="checkbox" disabled />
  <label class="goco-c-checkbox__label" for="checkbox-disabled">
    <span class="goco-c-checkbox__text">Checkbox</span>
  </label>
</div>

← Yes No →