# Option cards · MIAN

Selectable cards for shipping, plans or payment, and pill options for sizes and variants.

- Id: `radio-card` · Category: Forms · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/radio-card
- Use for: shipping options, choose a plan, payment method, size picker, option cards, delivery choice.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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”).

## Examples

### Shipping

```html
<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

```html
<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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/radio-card/source