Card Option

.card-option makes labels with radio/checkbox inputs look like card options.

Applicable Elements

• label which contains input[type="radio"] or input[type="checkbox"]

Basic Usage

<fieldset class="fieldset" style="width: 100%;">
  <legend class="legend">Choose your menu</legend>
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 12px;">
    <label class="card-option">
      <input class="radio" type="radio" name="menu" value="omakase" checked />
      <strong>Omakase</strong><br />
      Let the chef choose today’s best fish.
    </label>
    <label class="card-option">
      <input class="radio" type="radio" name="menu" value="favorites" />
      <strong>Choose your favorites</strong><br />
      Build your own sashimi selection.
    </label>
  </div>
</fieldset>

<fieldset class="fieldset" style="width: 100%;">
  <legend class="legend">Add something extra</legend>
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 12px;">
    <label class="card-option">
      <input class="checkbox" type="checkbox" name="extras" value="wasabi" />
      <strong>Fresh wasabi</strong><br />
      Grated to order and served on the side.
    </label>
    <label class="card-option">
      <input class="checkbox" type="checkbox" name="extras" value="daikon" />
      <strong>Shredded daikon</strong><br />
      A crisp and refreshing garnish.
    </label>
  </div>
</fieldset>

States

<label class="card-option">
  <input class="checkbox error" type="checkbox" name="state-error" />
  <strong>Sea urchin tasting</strong><br />
  Please choose another option.
</label>

<label class="card-option">
  <input class="radio" type="radio" name="state-disabled" disabled />
  <strong>Bluefin tuna tasting</strong><br />
  Sold out for today.
</label>

<label class="card-option">
  <input class="checkbox" type="checkbox" name="state-checked-disabled" checked disabled />
  <strong>Fresh wasabi</strong><br />
  Already included with this menu.
</label>

React component Advanced

<CardOption/> renders a single <label class="card-option" /> element.

Use <Radio/> or <Checkbox/> as its input child.