Checkbox

General information
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.
React
Vue
React
// 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>
Vue
// 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
Class
Description
.form-checkbox
Required to make a checkbox fit the template style
React props
Prop
Type
Default
Accepted values
name
string
-
-
value
string
-
-
disabled
boolean
false
-
checked
boolean
false
-
required
boolean
false
-
Vue props
Prop
Type
Default
Accepted values
name
string
-
-
value
string
-
-
disabled
boolean
false
-
checked
boolean
false
-
required
boolean
false
-
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. 

Basic elements - Previous

Select

Next - Basic elements

Radio

Last updated 7 months ago

Class	Description
`.form-checkbox`	Required to make a checkbox fit the template style

Prop	Type	Default	Accepted values
`name`	string	-	-
`value`	string	-	-
`disabled`	boolean	`false`	-
`checked`	boolean	`false`	-
`required`	boolean	`false`	-