Choice
Custom-styled checkboxes, radios, switches, and card selectors. The native input uses appearance: none and renders the custom control directly. States are driven by :checked, :focus-visible, and aria-invalid.
Checkbox group
index.htmlhtml
<div class="ln-choice">
<label class="ln-choice__option">
<input class="ln-choice__input" type="checkbox" checked>
<span class="ln-choice__label">Email notifications</span>
</label>
<label class="ln-choice__option">
<input class="ln-choice__input" type="checkbox">
<span class="ln-choice__label">SMS notifications</span>
</label>
<label class="ln-choice__option">
<input class="ln-choice__input" type="checkbox" disabled>
<span class="ln-choice__label">Push notifications (coming soon)</span>
</label>
</div>Radio group
index.htmlhtml
<div class="ln-choice">
<label class="ln-choice__option">
<input class="ln-choice__input" type="radio" name="plan" checked>
<span class="ln-choice__label">Free</span>
</label>
<label class="ln-choice__option">
<input class="ln-choice__input" type="radio" name="plan">
<span class="ln-choice__label">Pro</span>
</label>
<label class="ln-choice__option">
<input class="ln-choice__input" type="radio" name="plan">
<span class="ln-choice__label">Enterprise</span>
</label>
</div>Switch toggle
index.htmlhtml
<div class="ln-choice ln-choice--switch">
<label class="ln-choice__option">
<input class="ln-choice__input" type="checkbox" checked>
<span class="ln-choice__label">Dark mode</span>
</label>
<label class="ln-choice__option">
<input class="ln-choice__input" type="checkbox">
<span class="ln-choice__label">Auto-save</span>
</label>
</div>Card variant
index.htmlhtml
<div class="ln-choice ln-choice--card">
<label class="ln-choice__option">
<input class="ln-choice__input" type="radio" name="shipping" checked>
<div class="ln-choice__body">
<span class="ln-choice__label">Standard</span>
<span class="ln-choice__description">5-7 business days</span>
</div>
</label>
<label class="ln-choice__option">
<input class="ln-choice__input" type="radio" name="shipping">
<div class="ln-choice__body">
<span class="ln-choice__label">Express</span>
<span class="ln-choice__description">2-3 business days</span>
</div>
</label>
</div>Inline choice
index.htmlhtml
<div class="ln-choice ln-choice--inline">
<label class="ln-choice__option">
<input class="ln-choice__input" type="checkbox" checked>
<span class="ln-choice__label">Red</span>
</label>
<label class="ln-choice__option">
<input class="ln-choice__input" type="checkbox">
<span class="ln-choice__label">Green</span>
</label>
<label class="ln-choice__option">
<input class="ln-choice__input" type="checkbox">
<span class="ln-choice__label">Blue</span>
</label>
</div>Reference
| Class | Description | Responsive |
|---|---|---|
.ln-choice | Choice group container | No |
.ln-choice__option | Individual option row (label element) | No |
.ln-choice__input | Custom checkbox or radio input | No |
.ln-choice__body | Content wrapper for label and description | No |
.ln-choice__label | Option label text | No |
.ln-choice__description | Secondary description text | No |
.ln-choice__hint | Hint text below option | No |
.ln-choice__aside | Right-side value (e.g. price) | No |
.ln-choice--card | Card-style options with borders | No |
.ln-choice--switch | Toggle switch style | No |
.ln-choice--inline | Horizontal inline layout | No |