Internetstiftelsen Styleguide

Checkbox: Checkbox Inline 

<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';
@use "sass:color";

@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: color.adjust($color-ash, $lightness: -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: color.adjust($color-concrete, $lightness: -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.