Selection

Image choice

Choice cards that pair media with visible text while keeping the input semantic.

Canonical sourcepatterns/image-choice.html

Behavior ownerNative HTML

Runtime inside FormaNone

Example 1

Canonical

Canonical repository markup, namespaced only to keep examples independent.

Which layout is easiest to scan?

Compact layout Dense rows with minimal whitespace.

Spacious layout More separation and larger grouping regions.

View HTML

<fieldset class="ef-choice-group">
  <legend class="ef-choice-group__legend">Which layout is easiest to scan?</legend>

  <label class="ef-choice ef-choice--media">
    <input type="radio" name="ex1-image-choice-layout-choice" value="compact" required>
    <span class="ef-choice__media">
      <img src="/path/to/compact-layout.png" alt="">
    </span>
    <span class="ef-choice__content">
      <strong>Compact layout</strong>
      <span>Dense rows with minimal whitespace.</span>
    </span>
  </label>

  <label class="ef-choice ef-choice--media">
    <input type="radio" name="ex1-image-choice-layout-choice" value="spacious">
    <span class="ef-choice__media">
      <img src="/path/to/spacious-layout.png" alt="">
    </span>
    <span class="ef-choice__content">
      <strong>Spacious layout</strong>
      <span>More separation and larger grouping regions.</span>
    </span>
  </label>
</fieldset>

Example 2

Representative state

A browser-native state made visible without adding a runtime.

Which layout is easiest to scan?

Compact layout Dense rows with minimal whitespace.

Spacious layout More separation and larger grouping regions.

View HTML

<fieldset class="ef-choice-group">
  <legend class="ef-choice-group__legend">Which layout is easiest to scan?</legend>

  <label class="ef-choice ef-choice--media">
    <input type="radio" name="ex2-image-choice-layout-choice" value="compact" required checked>
    <span class="ef-choice__media">
      <img src="/path/to/compact-layout.png" alt="">
    </span>
    <span class="ef-choice__content">
      <strong>Compact layout</strong>
      <span>Dense rows with minimal whitespace.</span>
    </span>
  </label>

  <label class="ef-choice ef-choice--media">
    <input type="radio" name="ex2-image-choice-layout-choice" value="spacious">
    <span class="ef-choice__media">
      <img src="/path/to/spacious-layout.png" alt="">
    </span>
    <span class="ef-choice__content">
      <strong>Spacious layout</strong>
      <span>More separation and larger grouping regions.</span>
    </span>
  </label>
</fieldset>

Example 3

Constrained layout

The canonical contract inside a narrow application region.

Which layout is easiest to scan?

Compact layout Dense rows with minimal whitespace.

Spacious layout More separation and larger grouping regions.

View HTML

<fieldset class="ef-choice-group">
  <legend class="ef-choice-group__legend">Which layout is easiest to scan?</legend>

  <label class="ef-choice ef-choice--media">
    <input type="radio" name="ex3-image-choice-layout-choice" value="compact" required>
    <span class="ef-choice__media">
      <img src="/path/to/compact-layout.png" alt="">
    </span>
    <span class="ef-choice__content">
      <strong>Compact layout</strong>
      <span>Dense rows with minimal whitespace.</span>
    </span>
  </label>

  <label class="ef-choice ef-choice--media">
    <input type="radio" name="ex3-image-choice-layout-choice" value="spacious">
    <span class="ef-choice__media">
      <img src="/path/to/spacious-layout.png" alt="">
    </span>
    <span class="ef-choice__content">
      <strong>Spacious layout</strong>
      <span>More separation and larger grouping regions.</span>
    </span>
  </label>
</fieldset>