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

Field Group

Component status
Contribution
Last releasedMay 23, 2023
Current version@spectrum-css/fieldgroup@4.0.48
View repository
GitHub
View package
npm

Usage notes

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

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 class="spectrum-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 class="spectrum-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 class="spectrum-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 class="spectrum-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 class="spectrum-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 class="spectrum-Form">
      <div class="spectrum-FieldGroup spectrum-FieldGroup--toplabel spectrum-FieldGroup--horizontal" role="radiogroup" 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 is-invalid">
            <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 is-invalid">
            <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 class="spectrum-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 class="spectrum-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 class="spectrum-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 class="spectrum-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 class="spectrum-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 class="spectrum-Form">
      <div class="spectrum-FieldGroup spectrum-FieldGroup--sidelabel spectrum-FieldGroup--vertical" role="radiogroup" 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 class="spectrum-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 class="spectrum-Form">
      <div class="spectrum-FieldGroup spectrum-FieldGroup--sidelabel spectrum-FieldGroup--horizontal" role="radiogroup" 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 Label and Helptext

  • Include Field Label as size medium, spectrum-FieldLabel spectrum-FieldLabel--sizeM.
  • Include Helptext 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 FieldGroup items

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