Checkboxes and radios. These are built so that they work properly with both keyboard or mouse for both focus and input.
<!-- Default -->
<div class="checkbox">
<input class="checkbox__input" type="checkbox" id="checkbox1">
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
</svg>
</div>
<label class="checkbox__label" for="checkbox1">
Checkbox
</label>
</div>
<div class="checkbox">
<input class="checkbox__input" type="checkbox" id="checkbox2" checked>
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
</svg>
</div>
<label class="checkbox__label" for="checkbox2">
Checkbox
</label>
</div>
<div class="checkbox">
<input class="checkbox__input" type="checkbox" id="checkbox3" disabled>
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
</svg>
</div>
<label class="checkbox__label" for="checkbox3">
Disabled
</label>
</div>
<div class="checkbox">
<input class="checkbox__input" type="checkbox" id="checkbox4" disabled checked>
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
</svg>
</div>
<label class="checkbox__label" for="checkbox4">
Disabled
</label>
</div>
<div class="checkbox -secondary">
<input class="checkbox__input" type="checkbox" id="checkbox5">
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
</svg>
</div>
<label class="checkbox__label" for="checkbox5">
Secondary
</label>
</div>
<div class="checkbox -secondary">
<input class="checkbox__input" type="checkbox" id="checkbox6" checked>
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
</svg>
</div>
<label class="checkbox__label" for="checkbox6">
Secondary
</label>
</div>
<div class="checkbox">
<input class="checkbox__input" type="checkbox" id="checkbox7">
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
</svg>
</div>
<label class="checkbox__label" for="checkbox7">
Checkbox with a long descript that wraps. Consectetur voluptatibus suscipit accusantium veniam maiores ab reiciendis Consequatur deserunt fugit harum asperiores repellat atque modi laborum Animi odio odio vero qui ab ducimus Hic neque cumque ullam quae architecto.
</label>
</div>
<!-- Radio -->
<div class="checkbox">
<input class="checkbox__input" type="radio" name="radio1" id="radio1">
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
</svg>
</div>
<label class="checkbox__label" for="radio1">
Radio
</label>
</div>
<div class="checkbox">
<input class="checkbox__input" type="radio" name="radio1" id="radio2" checked>
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
</svg>
</div>
<label class="checkbox__label" for="radio2">
Radio
</label>
</div>
<div class="checkbox">
<input class="checkbox__input" type="radio" id="radio3" disabled>
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
</svg>
</div>
<label class="checkbox__label" for="radio3">
Disabled
</label>
</div>
<div class="checkbox">
<input class="checkbox__input" type="radio" id="radio4" disabled checked>
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
</svg>
</div>
<label class="checkbox__label" for="radio4">
Disabled
</label>
</div>
<div class="checkbox -secondary">
<input class="checkbox__input" type="radio" id="radio5">
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
</svg>
</div>
<label class="checkbox__label" for="radio5">
Secondary
</label>
</div>
<div class="checkbox -secondary">
<input class="checkbox__input" type="radio" id="radio6" checked>
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
</svg>
</div>
<label class="checkbox__label" for="radio6">
Secondary
</label>
</div>
<div class="checkbox">
<input class="checkbox__input" type="radio" name="radio1" id="radio7">
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
</svg>
</div>
<label class="checkbox__label" name="radio1" for="radio7">
Radio with a long descript that wraps. Consectetur voluptatibus suscipit accusantium veniam maiores ab reiciendis Consequatur deserunt fugit harum asperiores repellat atque modi laborum Animi odio odio vero qui ab ducimus Hic neque cumque ullam quae architecto.
</label>
</div>
@use "/resources/styles/common" as *;
@use "/resources/styles/config";
/// Checkbox component
///
/// --checkbox-color Accent color.
/// --checkbox-color-contrast Used against --checkbox-color.
///
.checkbox {
$b: &;
--checkbox-color: var(--color, #{config.$primary});
--checkbox-color-contrast: var(--color-contrast, #{blackwhite(config.$primary, config.$plain-text)});
display: inline-grid;
user-select: none;
padding: config.$thin-padding;
grid-template: "checkbox label";
gap: .5em;
&__input {
grid-area: checkbox;
appearance: none;
height: #{config.$line-height * 1em};
width: #{config.$line-height * 1em};
}
&__checkbox {
pointer-events: none;
grid-area: checkbox;
border-radius: .25em;
border: 2px solid var(--checkbox-color);
display: inline-block;
height: #{config.$line-height * 1em};
vertical-align: middle;
width: #{config.$line-height * 1em};
}
&__label {
margin-bottom: 0;
}
&__icon {
width: 100%;
height: 100%;
display: none;
}
&__input.-checked ~ &__checkbox,
&__input:checked ~ &__checkbox {
color: var(--checkbox-color-contrast);
background-color: var(--checkbox-color);
#{$b}__icon {
display: block;
}
}
&.-disabled,
&__input[disabled] ~ * {
--checkbox-color: #{config.$disabled};
--checkbox-color-contrast: #{config.$white};
color: #{config.$disabled};
cursor: default;
}
&.-secondary {
--checkbox-color: #{config.$secondary};
--checkbox-color-contrast: #{blackwhite(config.$secondary)};
}
&.-radio &__checkbox,
&__input[type="radio"] ~ &__checkbox {
border-radius: #{config.$line-height * 1em};
}
}