Internetstiftelsen Styleguide

Checkbox: Default 

<div class="m-form-control">
    <fieldset class="field-group">
        <legend class="label-legend">Checkbox</legend>
        <div class="checkbox">
            <input type="checkbox" id="radiobutton-0" name="Checkbox default" value="0" class="a-checkbox u-visuallyhidden">
            <label for="radiobutton-0">Checkbox</label>
        </div>
    </fieldset>
</div>
<script type="text/javascript">
    //Example JS validation
    const checkbox = document.querySelector('#radiobutton-0');
    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": "radiobutton-0",
  "label": "Checkbox",
  "value": "0",
  "is_inline": false,
  "is_disabled": false
}
  • Content: 
    @charset "UTF-8";
@use "sass:color";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/extends';
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;

@include mixin.atom(checkbox) {
	&[type='checkbox'] {
		+ label {
			display: inline-flex;
			position: relative;
			align-items: flex-start;
			padding-top: func.rhythm(0.5);
			padding-right: func.rhythm(2);
			padding-bottom: func.rhythm(0.5);
			font-family: var.$font-family-base;

			&::before {
				content: '';
				display: block;
				flex-shrink: 0;
				width: var.$icon-size-small;
				height: var.$icon-size-small;
				margin-top: func.to_rem(3px);
				margin-right: func.rhythm(1);
				border: 1px solid colors.$color-cyberspace;
				border-radius: var.$border-radius;
				background-color: colors.$color-snow;
			}
		}

		&:not([disabled]) {
			&:focus,
			&:hover {
				+ label {
					&::before {
						background-color: color.adjust(colors.$color-ash, $lightness: -5%);
					}
				}
			}
		}

		&:checked {
			+ label {
				&::after {
					content: '';
					display: block;
					position: absolute;
					top: func.to_rem(10.5px);
					left: func.to_rem(6px);
					width: func.to_rem(5px);
					height: func.to_rem(9px);
					transform: rotate(45deg);
					border: solid colors.$color-cyberspace;
					border-width: 0 2px 2px 0;
				}
			}
		}

		&[disabled] {
			+ label {
				@extend %disabled;

				&::before {
					background-color: color.adjust(colors.$color-concrete, $lightness: -5%);
				}
			}
		}
	}
}

@include bem.b(checkbox) {
	&.is-invalid {
		[type='checkbox'] {
			+ label {
				&::before {
					border-color: colors.$color-ruby-dark;
					background-color: colors.$color-ruby-light;
				}
			}
		}
	}
	@include bem.m(inline) {
		padding-top: 0;
		padding-bottom: 0;

		input[type='checkbox'] {
			+ label {
				margin-top: func.rhythm(1);
				margin-bottom: func.rhythm(1);
			}
		}
	}
}
  • URL: /components/raw/checkbox/_checkbox.scss
  • Filesystem Path: src/atoms/checkbox/_checkbox.scss
  • Size: 2.1 KB

No notes defined.