General
Getting Started
Quick Install
Using with Cordova
Using with Vue.js
Using with Stencil.js
Mobiscroll CLI
ES6 Modules
Instance
Customizing the Look and Feel
Upgrade From Trial
Utility functions
Typings
Update version
Upgrade Guide v4
Date & Time pickers
Event Calendar
Form components
Accordion
Alerts & Notifications
Buttons
Checkbox
Dropdown
Forms
Progress
Radio Buttons
Rating
Segmented
Slider
Stepper
Switch
Textfields
Timer
Responsive list
Numeric pickers
Pickers & dropdowns
Layout & navigation
Tools
Accessibility
Checkbox
Wrapped in label element
<label>
I agree
<input mbsc-checkbox id="agree" type="checkbox" />
</label>
Wrapped in div element
<div>
<label for="agree">I agree</label>
<input mbsc-checkbox id="agree" type="checkbox" />
</div>
With description
<label>
I agree
<span class="mbsc-desc">Sample description</span>
<input mbsc-checkbox id="agree" type="checkbox" />
</label>
Mobiscroll includes several predefined color presets, each serving its own semantic purpose
<label class="mbsc-checkbox-primary">
Primary
<input mbsc-checkbox type="checkbox" checked>
</label>
<label class="mbsc-checkbox-secondary">
Secondary
<input mbsc-checkbox type="checkbox" checked>
</label>
<label class="mbsc-checkbox-success">
Success
<input mbsc-checkbox type="checkbox" checked>
</label>
<label class="mbsc-checkbox-danger">
Danger
<input mbsc-checkbox type="checkbox" checked>
</label>
<label class="mbsc-checkbox-warning">
Warning
<input mbsc-checkbox type="checkbox" checked>
</label>
<label class="mbsc-checkbox-info">
Info
<input mbsc-checkbox type="checkbox" checked>
</label>Attributes
For many more examples - simple and complex use-cases - check out the checkbox demos for javascript.
Checkbox theming
Global variables of the Checkbox
Below you will find a list of SASS variables that affect the Checkbox:
| Variable name | Description |
|---|---|
| $mbsc-form-background-light | Affects the background color of the Checkbox along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups |
| $mbsc-form-background-dark | |
| $mbsc-form-text-light |
Affects the label
and in some themes the box
color of the Checkbox. It also affects other components: Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups |
| $mbsc-form-text-dark | |
| $mbsc-form-accent-light | Affects the checked color of the Checkboxes box) along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls. |
| $mbsc-form-accent-dark |
If you really want to get sophisticated or if a color doesn't look good on a specific theme and you want to overwrite it, you can fine tune all of the above variables individually for each theme. Below are the complete list of variables broken down to themes:
iOS theme
The following variables are specific to the iOS theme light variant:
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-ios-form-background | #ffffff | Affects the background color of the Checkbox along with the Switch, Radio button, Button, Progress, Segmented, Stepper and Groups |
| $mbsc-ios-form-text | #000000 | Affects the label color of the Checkbox. It also affects other components: Switch, Radio button, Button, Progress, Segmented, Stepper and Groups |
| $mbsc-ios-form-accent | #1273de | Affects the box color of the Checkbox along with the Switch, Radio button, Button, Progress, Segmented, Stepper and Groups controls. |
iOS Dark theme
The following variables are specific to the iOS theme dark variant:
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-ios-dark-form-background | #0f0f0f | Affects the background color of the Checkbox along with the Switch, Radio button, Button, Progress, Segmented, Stepper and Groups |
| $mbsc-ios-dark-form-text | #ffffff | Affects the label color of the Checkbox. It also affects other components: Switch, Radio button, Button, Progress, Segmented, Stepper and Groups |
| $mbsc-ios-dark-form-accent | #de7a13 | Affects the box color of the Checkbox along with the Switch, Radio button, Button, Progress, Segmented, Stepper and Groups controls. |
Windows theme
The following variables are specific to the Windows theme light variant:
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-windows-form-background | #ffffff | Affects the background color of the Checkbox along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups |
| $mbsc-windows-form-text | #262626 | Affects the label color of the Checkbox. It also affects other components: Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups |
| $mbsc-windows-form-accent | #0078d7 | Affects the checked color of the Checkboxes box along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls. |
Windows Dark theme
The following variables are specific to the Windows theme dark variant:
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-windows-dark-form-background | #000000 | Affects the background color of the Checkbox along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups |
| $mbsc-windows-dark-form-text | #ffffff | Affects the label color of the Checkbox. It also affects other components: Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups |
| $mbsc-windows-dark-form-accent | #0078d7 | Affects the checked color of the Checkboxes box along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls. |
Material theme
The following variables are specific to the Material theme light variant:
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-material-form-background | #eeeeee | Affects the background color of the Checkbox along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups |
| $mbsc-material-form-text | #6d6d6d | Affects the label color of the Checkbox. It also affects other components: Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups |
| $mbsc-material-form-accent | #019687 | Affects the checked color of the Checkboxes box in activated state along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls. |
Material Dark theme
The following variables are specific to the Material theme dark variant:
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-material-dark-form-background | #303030 | Affects the background color of the Checkbox along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups |
| $mbsc-material-dark-form-text | #d4d4d4 | Affects the label color of the Checkbox. It also affects other components: Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups |
| $mbsc-material-dark-form-accent | #81ccc4 | Affects the checked color of the Checkboxes box in activated state along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls. |
Mobiscroll theme
The following variables are specific to the Mobiscroll theme light variant:
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-mobiscroll-form-background | #f7f7f7 | Affects the background color of the Checkbox along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups |
| $mbsc-mobiscroll-form-text | #454545 | Affects the label color of the Checkbox. It also affects other components: Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups |
| $mbsc-mobiscroll-form-accent | #4fccc5 | Affects the checked color of the Checkboxes box along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls. |
Mobiscroll Dark theme
The following variables are specific to the Mobiscroll theme dark variant:
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-mobiscroll-dark-form-background | #263239 | Affects the background color of the Checkbox along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups |
| $mbsc-mobiscroll-dark-form-text | #f7f7f7 | Affects the label color of the Checkbox. It also affects other components: Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups |
| $mbsc-mobiscroll-dark-form-accent | #4fccc5 | Affects the checked color of the Checkboxes box along with the Switch, Radio button, Button, Slider, Progress, Segmented, Stepper, Rating and Groups controls. |
If you are looking for the generic Form variables and how they affect the form in general, check out the tables and pictures here.