✨ Welcome Summer Sale! Get all templates for $79 (40% Off) ✨
Cruip CSS

Checkbox

Effective on March 1st, 2023, Cruip CSS templates are no longer distributed, maintained or supported.

Checkbox

Checkbox buttons have to be wrapped in a <label> with a .form-checkbox class πŸ‘‡

<!-- Single checkbox button -->
<label class="form-checkbox">
    <input type="checkbox" name="red">Red
</label>

<!-- Multiple checkbox buttons -->
<div>
    <label class="form-checkbox">
        <input type="checkbox" name="yellow">Yellow
    </label>
</div>
<div>
    <label class="form-checkbox">
        <input type="checkbox" name="blue">Blue
    </label>
</div>

<!-- Multiple inline checkbox buttons -->
<span>
    <label class="form-checkbox">
        <input type="checkbox" name="green">Green
    </label>
</span>
<span class="ml-16">
    <label class="form-checkbox">
        <input type="checkbox" name="purple">Purple
    </label>
</span>

For React and Vue templates we have provided a checkbox component to be used as in the example below.

<!--Single checkbox button -->
<Checkbox name="red">Red</Checkbox>

<!-- Multiple checkbox buttons -->
<div>
  <Checkbox name="yellow">Yellow</Checkbox>
</div>
<div>
  <Checkbox name="blue">Blue</Checkbox>
</div>

<!-- Multiple inline checkbox buttons -->
<span>
  <Checkbox name="green">Green</Checkbox>
</span>
<span className="ml-16">
  <Checkbox name="purple">Purple</Checkbox>
</span>
<!--Single checkbox button -->
<c-checkbox name="red">Red</c-checkbox>

<!-- Multiple checkbox buttons -->
<div>
  <c-checkbox name="yellow">Yellow</c-checkbox>
</div>
<div>
  <c-checkbox name="blue">Blue</c-checkbox>
</div>

<!-- Multiple inline checkbox buttons-->
<span>
  <c-checkbox name="green">Green</c-checkbox>
</span>
<span className="ml-16">
  <c-checkbox name="purple">Purple</c-checkbox>
</span>

TL;DR

List of available HTML classes

ClassDescription
.form-checkboxRequired to make a checkbox fit the template style

React props

PropTypeDefaultAccepted values
namestring
valuestring
disabledbooleanfalse
checkedbooleanfalse
requiredbooleanfalse

Vue props

PropTypeDefaultAccepted values
namestring
valuestring
disabledbooleanfalse
checkedbooleanfalse
requiredbooleanfalse

Theming

Style is defined into 3 files:

πŸ“‹ Core file

src/assets/scss/core/elements/_forms.scss
πŸ‘†πŸš«Β Don’t edit this file!

πŸ“‹ Settings file

src/assets/scss/settings/elements/_buttons-and-forms.scss
πŸ‘† Use this to adjust Sass variables

πŸ“‹ Theme file

src/assets/scss/theme/elements/_forms.scss
πŸ‘† Use this to add custom CSS

Learn more about the Sass logic behind each template.
Last updated on August 17, 2021