<div class="m-form-control">
    <fieldset class="field-group">
        <legend class="label-legend">Checkbox</legend>
        <div class="checkbox checkbox--inline row no-gutters">
            <div class="grid-auto">
                <input type="checkbox" id="checkbox-1" name="Checkbox default" value="1" class="a-checkbox u-visuallyhidden">
                <label for="checkbox-1">Checkbox inline</label>
            </div>
        </div>
    </fieldset>
</div>
<script type="text/javascript">
    //Example JS validation
    const checkbox = document.querySelector('#checkbox-1');
    const checkboxContainer = document.querySelector('.checkbox.is-invalid');
    checkbox.addEventListener('change', function() {
        checkboxContainer.classList.toggle('is-invalid')
    });
</script>
<div class="m-form-control">
	<fieldset class="field-group">
		<legend class="label-legend">Checkbox</legend>
			<div class="checkbox{{#if is_inline}} checkbox--inline row no-gutters{{/if}}{{#if is_invalid}} is-invalid{{/if}}">
				{{#if is_inline}}
					<div class="grid-auto">
				{{/if}}
					<input type="checkbox" id="{{id}}" name="{{name}}" value="{{value}}" class="a-checkbox u-visuallyhidden" {{#if is_required}}required{{/if}} {{#if is_disabled}}disabled{{/if}} {{#if is_invalid}}aria-invalid="true"{{/if}}>
					<label for="{{id}}">{{label}}</label>
				{{#if is_inline}}
				</div>
				{{/if}}
			</div>
	</fieldset>
</div>
<script type="text/javascript">
	//Example JS validation
	const checkbox = document.querySelector('#{{id}}');
	const checkboxContainer = document.querySelector('.checkbox.is-invalid');

	checkbox.addEventListener('change', function(){
		checkboxContainer.classList.toggle('is-invalid')
	});
</script>
{
  "name": "Checkbox default",
  "id": "checkbox-1",
  "label": "Checkbox inline",
  "value": "1",
  "is_inline": true,
  "is_disabled": false
}
  • Content:
    @charset 'UTF-8';
    
    @include atom(checkbox) {
    	&[type='checkbox'] {
    		+ label {
    			display: inline-flex;
    			position: relative;
    			align-items: flex-start;
    			padding-top: rhythm(0.5);
    			padding-right: rhythm(2);
    			padding-bottom: rhythm(0.5);
    			font-family: $font-family-base;
    
    			&::before {
    				content: '';
    				display: block;
    				flex-shrink: 0;
    				width: $icon-size-small;
    				height: $icon-size-small;
    				margin-top: rem(3px);
    				margin-right: rhythm(1);
    				border: 1px solid $color-cyberspace;
    				border-radius: $border-radius;
    				background-color: $color-snow;
    			}
    		}
    
    		&:not([disabled]) {
    			&:focus,
    			&:hover {
    				+ label {
    					&::before {
    						background-color: darken($color-ash, 5%);
    					}
    				}
    			}
    		}
    
    		&:checked {
    			+ label {
    				&::after {
    					content: '';
    					display: block;
    					position: absolute;
    					top: rem(10.5px);
    					left: rem(6px);
    					width: rem(5px);
    					height: rem(9px);
    					transform: rotate(45deg);
    					border: solid $color-cyberspace;
    					border-width: 0 2px 2px 0;
    				}
    			}
    		}
    
    		&[disabled] {
    			+ label {
    				@extend %disabled;
    
    				&::before {
    					background-color: darken($color-concrete, 5%);
    				}
    			}
    		}
    	}
    }
    
    @include b(checkbox) {
    	&.is-invalid {
    		[type='checkbox'] {
    			+ label {
    				&::before {
    					border-color: $color-ruby-dark;
    					background-color: $color-ruby-light;
    				}
    			}
    		}
    	}
    	@include m(inline) {
    		padding-top: 0;
    		padding-bottom: 0;
    
    		input[type='checkbox'] {
    			+ label {
    				margin-top: rhythm(1);
    				margin-bottom: rhythm(1);
    			}
    		}
    	}
    }
    
  • URL: /components/raw/checkbox/_checkbox.scss
  • Filesystem Path: src/atoms/checkbox/_checkbox.scss
  • Size: 1.6 KB

No notes defined.