Check
Source
Example
html
<div class="x-check">
<input type="checkbox">
Checkbox
</div>
<div class="x-check">
<input type="radio" name="radio">
Radio
</div>More examples can be found in the Winduum docs.
Example CSS
css
@import "winduum/src/components/check/props/default.css" layer(theme);
@import "winduum/src/components/check/default.css" layer(utilities);
@import "winduum/src/components/check/interactive.css" layer(utilities);
@import "winduum/src/components/check/invalid.css" layer(utilities);
/* Example customization */
@layer theme {
:root, :host {
--x-check-size: 1.25rem;
--x-check-gap: 0.5rem;
}
}Winduum CSS Code
winduum/src/components/check/props/default.css
css
:root, :host {
--x-check-size: 1.25rem;
--x-check-gap: calc(var(--spacing) * 3);
--x-check-font-size: var(--text-sm);
--x-check-line-height: calc(1em + 0.25rem);
--x-check-border-radius: var(--radius-md);
--x-check-border-width: 1px;
--x-check-background-color: currentColor;
--x-check-border-color: currentColor;
--x-check-outline-width: 2px;
--x-check-icon-size: 1.125rem;
--x-check-icon-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>');
--x-check-radio-icon-mask: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 160c-53.019 0-96 42.981-96 96v0c0 53.019 42.981 96 96 96v0c53.019 0 96-42.981 96-96v0c0-53.019-42.981-96-96-96z"></path></svg>');
--x-check-indeterminate-icon-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" stroke-width="2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');
}winduum/src/components/check/default.css
css
.x-check {
--x-check-outline-color: var(--color-accent);
--x-check-icon-color: var(--color-accent-foreground);
font-weight: var(--x-check-font-weight);
font-size: var(--x-check-font-size);
line-height: var(--x-check-line-height);
letter-spacing: var(--x-check-letter-spacing);
gap: var(--x-check-gap);
display: inline-flex;
text-wrap: pretty;
&:has([type="radio"]) {
--x-check-icon-mask: var(--x-check-radio-icon-mask);
--x-check-border-radius: var(--x-check-radio-border-radius, 50%);
}
:where(input) {
inline-size: var(--x-check-size);
block-size: var(--x-check-size);
border-radius: var(--x-check-border-radius);
background-color:
color-mix(
in var(--x-check-background-color-space, srgb),
var(--x-check-background-color) var(--x-check-background-color-opacity, 0%),
var(--x-check-background-color-mix, transparent)
);
border:
var(--x-check-border-width) solid
color-mix(
in var(--x-check-border-color-space, srgb),
var(--x-check-border-color) var(--x-check-border-color-opacity, 20%),
var(--x-check-border-color-mix, transparent)
);
outline:
var(--x-check-outline-width) solid
color-mix(
in var(--x-check-outline-color-space, srgb),
var(--x-check-outline-color) var(--x-check-outline-color-opacity, 0%),
var(--x-check-outline-color-mix, transparent)
);
outline-offset: var(--x-check-outline-offset);
display: flex;
flex-shrink: 0;
&::before {
inline-size: var(--x-check-icon-size);
block-size: var(--x-check-icon-size);
color: var(--x-check-icon-color);
mask: var(--x-check-icon-mask);
transition: inherit;
content: "";
background-color: currentColor;
opacity: 0%;
transform: scale(0);
will-change: transform;
margin: auto;
}
&:where(:required) {
+ *::after {
color: var(--x-check-required-color, var(--color-error));
content: " *";
}
}
}
}winduum/src/components/check/interactive.css
css
.x-check {
--x-check-hover-border-color: var(--color-accent);
--x-check-hover-background-color: var(--color-accent);
--x-check-checked-background-color: var(--color-accent);
--x-check-focus-border-color: var(--color-accent);
:where(input) {
transition-property: var(--default-transition-property);
transition-timing-function: var(--ease-in-out);
transition-duration: var(--default-transition-duration);
&:where(:hover, :focus-visible) {
--x-check-background-color: var(--x-check-hover-background-color);
--x-check-background-color-opacity: var(--x-check-hover-background-color-opacity, 10%);
--x-check-border-color: var(--x-check-hover-border-color);
--x-check-border-color-opacity: var(--x-check-hover-border-color-opacity, 75%);
}
&:focus {
--x-check-border-color: var(--x-check-focus-border-color);
--x-check-border-color-opacity: var(--x-check-focus-border-color-opacity, 75%);
--x-check-outline-color-opacity: var(--x-check-focus-outline-opacity, 20%);
--x-check-outline-offset: var(--x-check-focus-outline-offset);
}
&:disabled {
--x-check-background-color: var(--x-check-disabled-background-color, currentColor);
--x-check-background-color-mix: var(--x-check-disabled-background-color-mix, transparent);
--x-check-background-color-opacity: var(--x-check-disabled-background-color-opacity, 5%);
--x-check-border-color: var(--x-check-disabled-border-color, currentColor);
--x-check-border-color-mix: var(--x-check-disabled-border-color-mix, transparent);
--x-check-border-color-opacity: var(--x-check-disabled-border-color-opacity, 15%);
cursor: not-allowed;
}
&:where([type="checkbox"]):indeterminate {
--x-check-icon-mask: var(--x-check-indeterminate-icon-mask);
}
&:is(:checked, [type="checkbox"]:indeterminate) {
--x-check-background-color: var(--x-check-checked-background-color);
--x-check-background-color-opacity: 100%;
--x-check-border-color-opacity: 0%;
&:disabled {
opacity: var(--x-check-checked-disabled-opacity, 75%);
}
&::before {
opacity: 100%;
transform: scale(1);
}
}
}
}winduum/src/components/check/invalid.css
css
.x-check {
:user-invalid {
--x-check-border-color: var(--x-check-invalid-border-color, var(--color-error));
--x-check-outline-color: var(--x-check-invalid-outline-color, var(--color-error));
--x-check-background-color: var(--x-check-invalid-background-color, var(--color-error));
--x-check-background-color-opacity: var(--x-check-invalid-background-color-opacity, 15%);
--x-check-border-color-opacity: var(--x-check-invalid-border-color-opacity, 100%);
}
}