Caster — Checkbox / Radio

Checkbox — simple

For inline filter rails, settings panels, agreement statements.

Show only OEM parts In stock only Save this filter for next visit Pro pricing (sign in required) Required for warranty service

<label class="checkbox">
  <input type="checkbox">
  <span class="checkbox__label">Show only OEM parts</span>
</label>

Checkbox — indeterminate

"Some-but-not-all" state for parent checkboxes. The visual is browser-native; set via JS (no HTML attribute exists).

All bundle items (3)

20" soft nylon disc brush Neutral pH cleaner, 1 gal OEM squeegee blade, 36"

<input type="checkbox" id="parentBox">

<script>
  // Set via JS — the indeterminate state has no HTML attribute
  document.getElementById('parentBox').indeterminate = true;
</script>

Radio — simple

Mutually-exclusive choice. Group with a shared name attribute.

Any condition New only Certified refurbished Used (not available in your area)

<label class="radio">
  <input type="radio" name="condition" checked>
  <span class="radio__label">Any condition</span>
</label>
<label class="radio">
  <input type="radio" name="condition">
  <span class="radio__label">New only</span>
</label>

Card variant — for prominent options

When the choice has supporting copy or is the primary action of a step. Whole row is the click target. Selected state highlights the card.

Standard ground Free · arrives Mon, Mar 18 — Wed, Mar 20

Expedited $14.99 · arrives Fri, Mar 14

Will-call pickup Columbus, OH warehouse · ready in 2 hours

<label class="opt-card">
  <input type="radio" name="ship" checked>
  <div class="opt-card-body">
    <strong>Standard ground</strong>
    <span>Free · arrives Mon, Mar 18</span>
  </div>
</label>

<!-- The opt-card style is page-local — copy the CSS from view-source
     to use it elsewhere, or build a permanent component if it spreads. -->

Multi-select cards

Same card composition, but with checkboxes for additive selection (filters, bundle picks, services to add).

Add 1-year service plan $89/yr · covers wear-part replacement and labor

Add operator training $249 · 90-min on-site training when machine arrives

Subscribe to consumables 10% off every refill · cancel anytime

Tokens consumed

Native accent-color handles the tick / dot color — no custom SVG icons. Disabled state uses opacity.disabled.

Slot	Token
Accent (tick / dot color)	--caster-color-brand-default
Label color	--caster-color-text-default
Label size	--caster-font-size-xs
Gap (control ↔ label)	--caster-spacing-2
Disabled opacity	--caster-opacity-disabled

Why native inputs and accent-color? Custom checkbox/radio styling is one of the most common a11y bugs on the web — focus rings disappear, keyboard navigation breaks, screen readers miss state changes. accent-color tints the native control with the brand color, keeping every accessibility behavior intact. The trade-off is slightly different rendering across browsers, which is fine for a B2B utility surface.