Selection

Choice group

Semantic single-choice options with primary and supporting text.

Canonical sourcepatterns/choice-group.html

Behavior ownerNative HTML

Runtime inside FormaNone

Example 1

Canonical

Canonical repository markup, namespaced only to keep examples independent.

Which environment is most representative? Cloud Primarily hosted cloud infrastructure. Hybrid Cloud and on-premises infrastructure. On-premises Primarily locally hosted infrastructure.

View HTML

<fieldset class="ef-choice-group">
  <legend class="ef-choice-group__legend">Which environment is most representative?</legend>

  <label class="ef-choice">
    <input type="radio" name="ex1-choice-group-environment" value="cloud" required>
    <span class="ef-choice__content">
      <strong>Cloud</strong>
      <span>Primarily hosted cloud infrastructure.</span>
    </span>
  </label>

  <label class="ef-choice">
    <input type="radio" name="ex1-choice-group-environment" value="hybrid">
    <span class="ef-choice__content">
      <strong>Hybrid</strong>
      <span>Cloud and on-premises infrastructure.</span>
    </span>
  </label>

  <label class="ef-choice">
    <input type="radio" name="ex1-choice-group-environment" value="on-premises">
    <span class="ef-choice__content">
      <strong>On-premises</strong>
      <span>Primarily locally hosted infrastructure.</span>
    </span>
  </label>
</fieldset>

Example 2

Representative state

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

Which environment is most representative? Cloud Primarily hosted cloud infrastructure. Hybrid Cloud and on-premises infrastructure. On-premises Primarily locally hosted infrastructure.

View HTML

<fieldset class="ef-choice-group">
  <legend class="ef-choice-group__legend">Which environment is most representative?</legend>

  <label class="ef-choice">
    <input type="radio" name="ex2-choice-group-environment" value="cloud" required checked>
    <span class="ef-choice__content">
      <strong>Cloud</strong>
      <span>Primarily hosted cloud infrastructure.</span>
    </span>
  </label>

  <label class="ef-choice">
    <input type="radio" name="ex2-choice-group-environment" value="hybrid">
    <span class="ef-choice__content">
      <strong>Hybrid</strong>
      <span>Cloud and on-premises infrastructure.</span>
    </span>
  </label>

  <label class="ef-choice">
    <input type="radio" name="ex2-choice-group-environment" value="on-premises">
    <span class="ef-choice__content">
      <strong>On-premises</strong>
      <span>Primarily locally hosted infrastructure.</span>
    </span>
  </label>
</fieldset>

Example 3

Constrained layout

The canonical contract inside a narrow application region.

Which environment is most representative? Cloud Primarily hosted cloud infrastructure. Hybrid Cloud and on-premises infrastructure. On-premises Primarily locally hosted infrastructure.

View HTML

<fieldset class="ef-choice-group">
  <legend class="ef-choice-group__legend">Which environment is most representative?</legend>

  <label class="ef-choice">
    <input type="radio" name="ex3-choice-group-environment" value="cloud" required>
    <span class="ef-choice__content">
      <strong>Cloud</strong>
      <span>Primarily hosted cloud infrastructure.</span>
    </span>
  </label>

  <label class="ef-choice">
    <input type="radio" name="ex3-choice-group-environment" value="hybrid">
    <span class="ef-choice__content">
      <strong>Hybrid</strong>
      <span>Cloud and on-premises infrastructure.</span>
    </span>
  </label>

  <label class="ef-choice">
    <input type="radio" name="ex3-choice-group-environment" value="on-premises">
    <span class="ef-choice__content">
      <strong>On-premises</strong>
      <span>Primarily locally hosted infrastructure.</span>
    </span>
  </label>
</fieldset>