Selection

Segmented control

Radio-backed compact selection with visible selected and focus states.

Canonical sourcepatterns/segmented-control.html

Behavior ownerNative HTML

Runtime inside FormaNone

Example 1

Canonical

Canonical repository markup, namespaced only to keep examples independent.

Density

Comfortable Compact

View HTML

<fieldset class="ef-field">
  <legend class="ef-field__label">Density</legend>
  <div class="ef-segmented">
    <label class="ef-segment">
      <input type="radio" name="ex1-segmented-control-density" value="comfortable" checked>
      <span>Comfortable</span>
    </label>
    <label class="ef-segment">
      <input type="radio" name="ex1-segmented-control-density" value="compact">
      <span>Compact</span>
    </label>
  </div>
</fieldset>

Example 2

Secondary surface

The same contract demonstrated on a secondary Forma surface.

Density

Comfortable Compact

View HTML

<fieldset class="ef-field">
  <legend class="ef-field__label">Density</legend>
  <div class="ef-segmented">
    <label class="ef-segment">
      <input type="radio" name="ex2-segmented-control-density" value="comfortable" checked>
      <span>Comfortable</span>
    </label>
    <label class="ef-segment">
      <input type="radio" name="ex2-segmented-control-density" value="compact">
      <span>Compact</span>
    </label>
  </div>
</fieldset>

Example 3

Constrained layout

The canonical contract inside a narrow application region.

Density

Comfortable Compact

View HTML

<fieldset class="ef-field">
  <legend class="ef-field__label">Density</legend>
  <div class="ef-segmented">
    <label class="ef-segment">
      <input type="radio" name="ex3-segmented-control-density" value="comfortable" checked>
      <span>Comfortable</span>
    </label>
    <label class="ef-segment">
      <input type="radio" name="ex3-segmented-control-density" value="compact">
      <span>Compact</span>
    </label>
  </div>
</fieldset>