<div class="checkbox--dark">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="choice" type="checkbox" name="choice" value="1" />
<label class="checkbox__label" for="choice">I agree with the Shipping and Billing terms and conditions conditions conditions conditions conditions conditions conditions conditions conditions conditions conditions</label>
</div>
<!-- NOTE: This div is reserved for field-specific error messages by a backend -->
<div class="checkbox__error">Please provide a value for this field</div>
</div>
<div class="checkbox--{{splitDashLast _self.name}}">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="{{id}}" type="checkbox" name="{{name}}" {{#if value}}value="{{value}}"{{/if}} {{#if disabled}}disabled{{/if}} {{#if required}}required="true"{{/if}} {{#if checked}}checked{{/if}} />
<label class="checkbox__label" for="{{id}}">{{{label}}}</label>
</div>
<!-- NOTE: This div is reserved for field-specific error messages by a backend -->
{{#if error}}
<div class="checkbox__error">{{error}}</div>
{{else}}
<!--<div class="checkbox__error">Put in the error message here...</div>-->
{{/if}}
</div>
{
"id": "choice",
"name": "choice",
"label": "I agree with the Shipping and Billing terms and conditions conditions conditions conditions conditions conditions conditions conditions conditions conditions conditions",
"value": "1",
"required": false,
"disabled": false,
"checked": false,
"error": "Please provide a value for this field"
}
export * from '../checkbox-material-like/checkbox-material-like-bundle';
import './checkbox-lite-checkmark.scss'; // override SCSS imported from above
export * from '../checkbox-material-like/checkbox-material-like';
@import "~shared/base";
/*******************************************************************************
* Contextual classes:
* - is-disabled: When input is disabled
* - is-pressed: When the user has the mouse down on the checkbox
* - is-tabbed: When the input is focused by tabbing (a11y)
* - is-focused: When the input is focused
* - is-initialized: When the JS for the component is initialized
* - has-no-label: If there is no label available
******************************************************************************/
// font settings
$checkboxIconFontSize: 1.125rem;
// Need to use string here due to:
// https://github.com/webpack-contrib/sass-loader/issues/487
$variants: "dark", "light";
@each $color in $variants {
/*****************************************************************************
* General
****************************************************************************/
.checkbox {
$block: &;
&--#{unquote($color)} {
/*************************************************************************
* Label
************************************************************************/
#{$block}__label {
$padding: 2px;
$border: 1px;
padding-left: calc(#{$checkboxIconFontSize} + #{$padding * 2} + #{$border * 2} + 10px);
@include form-components-icons-before("checkmark-lite");
}
}
}
}
This component is based on ‘checkbox material like’ and inherits its behavior