A generic size option selector for e-commerce sites.
- Uses a fieldset element for the outside of the custom radio inputs.
- Has a custom focus ring.
- Alpine.js - Some or all of the components require Alpine.js for functionality.
Size Option
Open in New Window@use '../config/config'; // Use (need) only if this is a standalone file.
@use 'sprucecss/scss/spruce' as *;
.form-size-option {
@include layout-stack('xs');
&__label {
font-family: config('font-family', $form-label, false);
font-size: config('font-size', $form-label, false);
font-weight: config('font-weight', $form-label, false);
}
&__inner {
display: flex;
flex-wrap: wrap;
gap: spacer('s');
}
}
.form-size {
$this: &;
display: flex;
&__control {
@include visually-hidden;
&:checked + #{$this}__label {
background-color: color('secondary-background', 'btn');
border-color: color('secondary-background', 'btn');
box-shadow: none;
color: color('secondary-foreground', 'btn');
}
&:focus-visible + #{$this}__label {
@include short-ring('button', 'secondary');
}
&:disabled + #{$this}__label {
opacity: 50%;
}
}
&__label {
background-color: color('background', 'form');
border: 1px solid color('border');
border-radius: config('border-radius', $btn, false);
color: color('label', 'form');
font-size: config('font-size-sm', $typography, false);
font-weight: 700;
padding: spacer('xs') spacer('s');
}
}
<fieldset class="form-size-option" x-data="{ selected: 'M' }">
<legend class="form-size-option__label">Size: <span class="form-size-option__selected" x-text="selected"></span></legend>
<div class="form-size-option__inner">
<label class="form-size">
<input class="form-size__control" type="radio" value="xs" name="size" @change="selected = 'XS'" />
<span class="form-size__label">XS</span>
</label>
<label class="form-size">
<input class="form-size__control" type="radio" value="s" name="size" disabled="disabled" />
<span class="form-size__label">S</span>
</label>
<label class="form-size">
<input class="form-size__control" type="radio" value="m" name="size" @change="selected = 'M'" checked />
<span class="form-size__label">M</span>
</label>
<label class="form-size">
<input class="form-size__control" type="radio" value="l" name="size" @change="selected = 'L'" />
<span class="form-size__label">L</span>
</label>
<label class="form-size">
<input class="form-size__control" type="radio" value="xl" name="size" @change="selected = 'XL'" />
<span class="form-size__label">XL</span>
</label>
<label class="form-size">
<input class="form-size__control" type="radio" value="xxl" name="size" @change="selected = 'XXL'" />
<span class="form-size__label">XXL</span>
</label>
</div>
</fieldset>
A generic size option selector for e-commerce sites.
Did you find a bug? Have an idea or a question? Please open an issue to help us develop the project.