• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Field group

Component status
Contribution
Current version@spectrum-css/fieldgroup@4.2.4
ReleasedMarch 7, 2024
View repository
GitHub
View package
npm

Usage notes

  • A group of fields, usually Radios or Checkboxes.
  • Field group incorporates the Help text component which may appear below a Field group.
  • Help text is necessary to denote invalid checkbox fields, invalid radio button fields, and required fields.
  • Invalid radio buttons are signified only by negative Help text.
  • Invalid checkboxes are signified by negative Help text and the negative/invalid color on the input box.

Variants

Vertical
Contribution

A vertical group of fields.

Radio

Radio Group Label
Select an option.

Radio

Radio Group Label
Select an option.

Checkbox

Checkbox Group Label
Select an option.
Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Radio</h4>
    <form>
      <div class="spectrum-FieldGroup" role="radiogroup" aria-labelledby="radiogroup-label-1">
        <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM" id="radiogroup-label-1">Radio Group Label</div>

        <div class="spectrum-FieldGroupInputLayout" aria-describedby="helptext-radio-1">
          <div class="spectrum-Radio spectrum-FieldGroup-item">
            <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0">
            <span class="spectrum-Radio-button"></span>
            <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
          </div>

          <div class="spectrum-Radio spectrum-FieldGroup-item">
            <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-1" checked>
            <span class="spectrum-Radio-button"></span>
            <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
          </div>

          <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText" id="helptext-radio-1">
            <div class="spectrum-HelpText-text">Select an option.</div>
          </div>
        </div>
      </div>
    </form>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Radio</h4>
    <form>
      <div class="spectrum-FieldGroup spectrum-FieldGroup--toplabel spectrum-FieldGroup--vertical" role="radiogroup" aria-labelledby="radiogroup-label-1">
        <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM" id="radiogroup-label-1">Radio Group Label</div>

        <div class="spectrum-FieldGroupInputLayout" aria-describedby="helptext-radio-1">
          <div class="spectrum-Radio spectrum-FieldGroup-item">
            <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0">
            <span class="spectrum-Radio-button"></span>
            <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
          </div>

          <div class="spectrum-Radio spectrum-FieldGroup-item">
            <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-1" checked>
            <span class="spectrum-Radio-button"></span>
            <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
          </div>

          <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText" id="helptext-radio-1">
            <div class="spectrum-HelpText-text">Select an option.</div>
          </div>
        </div>
      </div>
    </form>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Checkbox</h4>
    <form>
      <div class="spectrum-FieldGroup spectrum-FieldGroup--toplabel spectrum-FieldGroup--vertical" role="group" aria-labelledby="checkboxgroup-label-1">
        <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM" id="checkboxgroup-label-1">Checkbox Group Label</div>

        <div class="spectrum-FieldGroupInputLayout" aria-describedby="helptext-checkbox-1">
          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
            <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
            <span class="spectrum-Checkbox-box">
              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Checkmark100" />
              </svg>
            </span>
            <span class="spectrum-Checkbox-label">Checkbox</span>
          </label>

          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
            <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
            <span class="spectrum-Checkbox-box">
              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Checkmark100" />
              </svg>
            </span>
            <span class="spectrum-Checkbox-label">Checkbox</span>
          </label>

          <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText" id="helptext-checkbox-1">
            <div class="spectrum-HelpText-text">Select an option.</div>
          </div>
        </div>
      </div>
    </form>
  </div>

</div>

Horizontal
Contribution

A horizontal group of fields.

Radio

Radio Group Label
Select an option.

Checkbox

Checkbox Group Label
Select an option.
Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Radio</h4>
    <form>
      <div class="spectrum-FieldGroup spectrum-FieldGroup--toplabel spectrum-FieldGroup--horizontal" role="radiogroup" aria-labelledby="radiogroup-label-2">
        <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM" id="radiogroup-label-2">Radio Group Label</div>

        <div class="spectrum-FieldGroupInputLayout" aria-describedby="helptext-radio-2">
          <div class="spectrum-Radio spectrum-FieldGroup-item">
            <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-2">
            <span class="spectrum-Radio-button"></span>
            <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
          </div>

          <div class="spectrum-Radio spectrum-FieldGroup-item">
            <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-3" checked>
            <span class="spectrum-Radio-button"></span>
            <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
          </div>

          <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText" id="helptext-radio-2">
            <div class="spectrum-HelpText-text">Select an option.</div>
          </div>
        </div>
      </div>
    </form>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Checkbox</h4>
    <form>
      <div class="spectrum-FieldGroup spectrum-FieldGroup--toplabel spectrum-FieldGroup--horizontal" role="group" aria-labelledby="checkboxgroup-label-2">
        <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM" id="checkboxgroup-label-2">Checkbox Group Label</div>

        <div class="spectrum-FieldGroupInputLayout" aria-describedby="helptext-checkbox-2">
          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
            <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
            <span class="spectrum-Checkbox-box">
              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Checkmark100" />
              </svg>
            </span>
            <span class="spectrum-Checkbox-label">Checkbox</span>
          </label>

          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
            <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" checked>
            <span class="spectrum-Checkbox-box">
              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Checkmark100" />
              </svg>
            </span>
            <span class="spectrum-Checkbox-label">Checkbox</span>
          </label>

          <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText" id="helptext-checkbox-2">
            <div class="spectrum-HelpText-text">Select an option.</div>
          </div>
        </div>
      </div>
    </form>
  </div>

</div>

Invalid
Contribution

An invalid group of fields.

Radio

Radio Group Label
Select an option.

Checkbox

Checkbox Group Label
Select an option.
Show markup

<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Radio</h4>
    <form>
      <div
        class="spectrum-FieldGroup spectrum-FieldGroup--toplabel spectrum-FieldGroup--horizontal"
        role="radiogroup"
        aria-invalid="true"
        aria-labelledby="radiogroup-label-3"
      >
        <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM" id="radiogroup-label-3">Radio Group Label</div>

        <div class="spectrum-FieldGroupInputLayout" aria-describedby="helptext-radio-3">
          <div class="spectrum-Radio spectrum-FieldGroup-item">
            <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-4">
            <span class="spectrum-Radio-button"></span>
            <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
          </div>

          <div class="spectrum-Radio spectrum-FieldGroup-item">
            <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-5" checked>
            <span class="spectrum-Radio-button"></span>
            <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
          </div>

          <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText--negative" id="helptext-radio-3">
            <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-HelpText-validationIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-icon-18-Alert" />
            </svg>
            <div class="spectrum-HelpText-text">Select an option.</div>
          </div>
        </div>
      </div>
    </form>
  </div>


  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Checkbox</h4>
    <form>
      <div class="spectrum-FieldGroup spectrum-FieldGroup--toplabel spectrum-FieldGroup--horizontal" role="group" aria-labelledby="checkboxgroup-label-3">
        <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM" id="checkboxgroup-label-3">Checkbox Group Label</div>

        <div class="spectrum-FieldGroupInputLayout" aria-describedby="helptext-checkbox-3">
          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item is-invalid">
            <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-4">
            <span class="spectrum-Checkbox-box">
              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Checkmark100" />
              </svg>
            </span>
            <span class="spectrum-Checkbox-label">Checkbox</span>
          </label>

          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item is-invalid">
            <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-5" checked>
            <span class="spectrum-Checkbox-box">
              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Checkmark100" />
              </svg>
            </span>
            <span class="spectrum-Checkbox-label">Checkbox</span>
          </label>

          <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText--negative" id="helptext-checkbox-3">
            <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-HelpText-validationIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-icon-18-Alert" />
            </svg>
            <div class="spectrum-HelpText-text">Select an option.</div>
          </div>
        </div>
      </div>
    </form>
  </div>

</div>

Required or Optional
Contribution

An optional or required group of fields.

Required

Radio Group Label (required)
Select an option.

Required Asterisk

Radio Group Label
Select an option.

Optional

Radio Group Label (optional)
Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Required</h4>
    <form>
      <div class="spectrum-FieldGroup spectrum-FieldGroup--toplabel spectrum-FieldGroup--vertical" role="radiogroup" aria-labelledby="radiogroup-label-4">
        <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM" id="radiogroup-label-4">Radio Group Label (required)</div>

        <div class="spectrum-FieldGroupInputLayout" aria-describedby="helptext-radio-4">
          <div class="spectrum-Radio spectrum-FieldGroup-item">
            <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-6">
            <span class="spectrum-Radio-button"></span>
            <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
          </div>

          <div class="spectrum-Radio spectrum-FieldGroup-item">
            <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-7" checked>
            <span class="spectrum-Radio-button"></span>
            <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
          </div>

          <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText" id="helptext-radio-4">
            <div class="spectrum-HelpText-text">Select an option.</div>
          </div>
        </div>
      </div>
    </form>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Required Asterisk</h4>
    <form>
      <div class="spectrum-FieldGroup spectrum-FieldGroup--toplabel spectrum-FieldGroup--vertical" role="radiogroup" aria-labelledby="radiogroup-label-5">
        <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM" id="radiogroup-label-5">Radio Group Label
          <svg class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Asterisk100" />
          </svg>
        </div>

        <div class="spectrum-FieldGroupInputLayout" aria-describedby="helptext-radio-5">
          <div class="spectrum-Radio spectrum-FieldGroup-item">
            <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-8">
            <span class="spectrum-Radio-button"></span>
            <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
          </div>

          <div class="spectrum-Radio spectrum-FieldGroup-item">
            <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-9" checked>
            <span class="spectrum-Radio-button"></span>
            <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
          </div>

          <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText" id="helptext-radio-5">
            <div class="spectrum-HelpText-text">Select an option.</div>
          </div>
        </div>
      </div>
    </form>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Optional</h4>
    <form>
      <div class="spectrum-FieldGroup spectrum-FieldGroup--toplabel spectrum-FieldGroup--vertical" role="radiogroup" aria-labelledby="radiogroup-label-6">
        <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM" id="radiogroup-label-6">Radio Group Label (optional)</div>

        <div class="spectrum-FieldGroupInputLayout">
          <div class="spectrum-Radio spectrum-FieldGroup-item">
            <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-10">
            <span class="spectrum-Radio-button"></span>
            <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
          </div>

          <div class="spectrum-Radio spectrum-FieldGroup-item">
            <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-11" checked>
            <span class="spectrum-Radio-button"></span>
            <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

Side Label Position
Contribution

Side Label Vertical Radio

Radio Group Label
Select an option.

Side Label Vertical Checkbox

Checkbox Group Label
Select an option.

Side Label Horizontal Radio

Radio Group Label
Select an option.

Side Label Horizontal Checkbox

Checkbox Group Label
Select an option.
Show markup
<div class="spectrum-Examples">

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Side Label Vertical Radio</h4>
    <form>
      <div class="spectrum-FieldGroup spectrum-FieldGroup--sidelabel spectrum-FieldGroup--vertical" role="radiogroup" aria-labelledby="radiogroup-label-7">
        <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--right" id="radiogroup-label-7">Radio Group Label</div>

        <div class="spectrum-FieldGroupInputLayout" aria-describedby="helptext-radio-7">
          <div class="spectrum-Radio spectrum-FieldGroup-item">
            <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-12">
            <span class="spectrum-Radio-button"></span>
            <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
          </div>

          <div class="spectrum-Radio spectrum-FieldGroup-item">
            <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-13" checked>
            <span class="spectrum-Radio-button"></span>
            <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
          </div>

          <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText" id="helptext-radio-7">
            <div class="spectrum-HelpText-text">Select an option.</div>
          </div>
        </div>
      </div>
    </form>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Side Label Vertical Checkbox</h4>
    <form>
      <div class="spectrum-FieldGroup spectrum-FieldGroup--sidelabel spectrum-FieldGroup--vertical" role="group" aria-labelledby="checkboxgroup-label-4">
        <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--right" id="checkboxgroup-label-4">Checkbox Group Label</div>

        <div class="spectrum-FieldGroupInputLayout" aria-describedby="helptext-checkbox-4">
          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
            <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-6">
            <span class="spectrum-Checkbox-box">
              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Checkmark100" />
              </svg>
            </span>
            <span class="spectrum-Checkbox-label">Checkbox</span>
          </label>

          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
            <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-7" checked>
            <span class="spectrum-Checkbox-box">
              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Checkmark100" />
              </svg>
            </span>
            <span class="spectrum-Checkbox-label">Checkbox</span>
          </label>
          <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText" id="helptext-checkbox-4">
            <div class="spectrum-HelpText-text">Select an option.</div>
          </div>
        </div>
      </div>
    </form>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Side Label Horizontal Radio</h4>
    <form>
      <div class="spectrum-FieldGroup spectrum-FieldGroup--sidelabel spectrum-FieldGroup--horizontal" role="radiogroup" aria-labelledby="radiogroup-label-8">
        <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--right" id="radiogroup-label-8">Radio Group Label</div>

        <div class="spectrum-FieldGroupInputLayout" aria-describedby="helptext-radio-8">
          <div class="spectrum-Radio spectrum-FieldGroup-item">
            <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-14">
            <span class="spectrum-Radio-button"></span>
            <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
          </div>

          <div class="spectrum-Radio spectrum-FieldGroup-item">
            <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-15" checked>
            <span class="spectrum-Radio-button"></span>
            <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
          </div>

          <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText" id="helptext-radio-8">
            <div class="spectrum-HelpText-text">Select an option.</div>
          </div>
        </div>
      </div>
    </form>

    <hr>

    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Side Label Horizontal Checkbox</h4>
    <form>
      <div class="spectrum-FieldGroup spectrum-FieldGroup--sidelabel spectrum-FieldGroup--horizontal" role="group" aria-labelledby="checkboxgroup-label-5">
        <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--right" id="checkboxgroup-label-5">Checkbox Group Label</div>

        <div class="spectrum-FieldGroupInputLayout" aria-describedby="helptext-checkbox-5">
          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
            <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-8">
            <span class="spectrum-Checkbox-box">
              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Checkmark100" />
              </svg>
            </span>
            <span class="spectrum-Checkbox-label">Checkbox</span>
          </label>

          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
            <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-9" checked>
            <span class="spectrum-Checkbox-box">
              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Checkmark100" />
              </svg>
            </span>
            <span class="spectrum-Checkbox-label">Checkbox</span>
          </label>

          <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText" id="helptext-checkbox-5">
            <div class="spectrum-HelpText-text">Select an option.</div>
          </div>
        </div>
      </div>
    </form>
  </div>

</div>

Read-only Checkboxes
Contribution

A group of read-only checkboxes that have been checked. In U.S. English, use commas to delineate items within read-only checkbox groups. In other languages, use the locale-specific formatting.

Show markup
<div class="spectrum-FieldGroup">
  <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item is-disabled is-readOnly">
    <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-10" checked disabled>
    <span class="spectrum-Checkbox-box">
      <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Checkmark100" />
      </svg>
    </span>
    <span class="spectrum-Checkbox-label">Apples</span>
  </label>
  <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item is-disabled is-readOnly">
    <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-11" checked disabled>
    <span class="spectrum-Checkbox-box">
      <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Checkmark100" />
      </svg>
    </span>
    <span class="spectrum-Checkbox-label">Peaches</span>
  </label>

  <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item is-disabled is-readOnly">
    <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-12" checked disabled>
    <span class="spectrum-Checkbox-box">
      <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Checkmark100" />
      </svg>
    </span>
    <span class="spectrum-Checkbox-label">Grapes</span>
  </label>
  <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item is-disabled is-readOnly">
    <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-13" checked disabled>
    <span class="spectrum-Checkbox-box">
      <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Checkmark100" />
      </svg>
    </span>
    <span class="spectrum-Checkbox-label">Bananas</span>
  </label>
</div>

Migration Guide

Field group now includes Field label and Help text

  • Include Field Label as size medium, spectrum-FieldLabel spectrum-FieldLabel--sizeM.
  • Include Help text as spectrum-HelpText-text.

Field group label has two layout options

  • Label can be top aligned with spectrum-FieldGroup spectrum-FieldGroup--toplabel.
  • Label can be side aligned with spectrum-FieldGroup spectrum-FieldGroup--sidelabel.

Field group must now include spectrum-FieldGroupInputLayout as the immediate parent of the Field group items

  • Due to the addition of label, a new nested div must wrap the fieldgroup items to control their layout separately from the label