Option cards
Selectable cards for shipping, plans or payment, and pill options for sizes and variants.
Shipping
<fieldset class="mn-choices" style="max-width:28rem"><legend>Delivery</legend>
<label class="mn-choice"><input class="mn-radio" type="radio" name="ship" checked><span class="mn-choice-title">Standard</span><span class="mn-choice-desc">3–5 working days, tracked</span><span class="mn-choice-meta">Free</span></label>
<label class="mn-choice"><input class="mn-radio" type="radio" name="ship"><span class="mn-choice-title">Express</span><span class="mn-choice-desc">Tomorrow before 12:00</span><span class="mn-choice-meta">€9</span></label>
<label class="mn-choice"><input class="mn-radio" type="radio" name="ship" disabled><span class="mn-choice-title">Pick up in Horezu</span><span class="mn-choice-desc">Studio closed until 1 October</span><span class="mn-choice-meta">—</span></label>
</fieldset>Sizes
<fieldset class="mn-choices mn-choices-pills"><legend>Size</legend>
<label class="mn-choice"><input type="radio" name="size" value="XS">XS</label><label class="mn-choice"><input type="radio" name="size" value="S">S</label><label class="mn-choice"><input type="radio" name="size" value="M" checked>M</label><label class="mn-choice"><input type="radio" name="size" value="L">L</label><label class="mn-choice"><input type="radio" name="size" value="XL" disabled aria-label="XL, sold out">XL</label>
</fieldset>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/radio-card.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-choices | A <fieldset> of options with a <legend>. mn-choices-row lays them side by side. |
| mn-choice | A <label>: an mn-radio (or mn-checkbox), mn-choice-title, mn-choice-desc and mn-choice-meta (price). |
| mn-choices-pills | Compact pills for sizes and variants; the input is hidden, the pill shows focus and selection. |
Accessibility
- Native radios: arrow keys move between options and the whole card is the click target.
- Disabled options stay visible and say why (“Sold out”).