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

Form

Component status
Contribution
Current version@spectrum-css/fieldlabel@8.1.3
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/fieldlabel@9.0.0-s2-foundations.13
ReleasedSeptember 12, 2024
View repository
GitHub
View package
npm

Usage notes

Form provides structure and spacing for your form fields.

Variants

Standard - left-aligned text
Contribution

A two column layout with left-aligned label text. Apply .spectrum-FieldLabel--left to each Field label.

Interests
Show markup
<form class="spectrum-Form">
  <div class="spectrum-Form-item">
    <label for="fieldLabelExample-company-1" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--left">Company Title</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Textfield spectrum-Textfield--multiline">
        <textarea id="fieldLabelExample-company-1" name="field" class="spectrum-Textfield-input"></textarea>
      </div>
    </div>
  </div>
  <div class="spectrum-Form-item">
    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--left" for="fieldLabelExample-emailaddress-1">Email Address</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Textfield">
        <input class="spectrum-Textfield-input" aria-invalid="false" type="text" id="fieldLabelExample-emailaddress-1">
      </div>
    </div>
  </div>
  <div class="spectrum-Form-item">
    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--left" for="fieldLabelExample-country-1">Country</label>
    <div class="spectrum-Form-itemField">
      <button type="button" class="spectrum-Picker spectrum-Picker--sizeM" aria-haspopup="listbox" id="fieldLabelExample-country-1">
        <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron100" />
        </svg>
      </button>
    </div>
  </div>

  <div class="spectrum-Form-item" role="group" aria-labelledby="checkboxgroup-label-1">
    <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--left" id="checkboxgroup-label-1">Interests</div>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1-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">Kittens</span>
        </label>
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1-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">Dogs</span>
        </label>
      </div>
    </div>
  </div>

  <div class="spectrum-Form-item">
    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--left" for="fieldLabelExample-stepper-1">Age</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Stepper">
        <div class="spectrum-Textfield spectrum-Stepper-textfield">
          <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5" id="fieldLabelExample-stepper-1">
        </div>
        <div class="spectrum-Stepper-buttons">
          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
            <div class="spectrum-InfieldButton-fill">
              <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                  <use xlink:href="#spectrum-css-icon-Chevron75" />
                </svg>
            </div>
          </button>
          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
            <div class="spectrum-InfieldButton-fill">
              <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Chevron75" />
              </svg>
            </div>
          </button>
        </div>
      </div>
    </div>
  </div>
</form>

Right-aligned text
Contribution

A two column layout with right-aligned label text. Apply .spectrum-FieldLabel--right to each Field label.

Interests
Show markup
<form class="spectrum-Form">
  <div class="spectrum-Form-item">
    <label for="fieldLabelExample-company-2" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--right">Company Title</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Textfield spectrum-Textfield--multiline">
        <textarea id="fieldLabelExample-company-2" name="field" class="spectrum-Textfield-input"></textarea>
      </div>
    </div>
  </div>
  <div class="spectrum-Form-item">
    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--right" for="fieldLabelExample-emailaddress-2">Email Address</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Textfield">
        <input class="spectrum-Textfield-input" aria-invalid="false" type="text" id="fieldLabelExample-emailaddress-2">
      </div>
    </div>
  </div>
  <div class="spectrum-Form-item">
    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--right" for="fieldLabelExample-country-2">Country</label>
    <div class="spectrum-Form-itemField">
      <button type="button" class="spectrum-Picker spectrum-Picker--sizeM" aria-haspopup="listbox" id="fieldLabelExample-country-2">
        <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron100" />
        </svg>
      </button>
    </div>
  </div>

  <div class="spectrum-Form-item" role="group" aria-labelledby="checkboxgroup-label-2">
    <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--right" id="checkboxgroup-label-2">Interests</div>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2-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">Kittens</span>
        </label>
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2-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">Dogs</span>
        </label>
      </div>
    </div>
  </div>

  <div class="spectrum-Form-item">
    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--right" for="fieldLabelExample-stepper-2">Age</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Stepper">
        <div class="spectrum-Textfield spectrum-Stepper-textfield">
          <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5" id="fieldLabelExample-stepper-2">
        </div>
        <div class="spectrum-Stepper-buttons">
          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
            <div class="spectrum-InfieldButton-fill">
              <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                  <use xlink:href="#spectrum-css-icon-Chevron75" />
                </svg>
            </div>
          </button>
          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
            <div class="spectrum-InfieldButton-fill">
              <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Chevron75" />
              </svg>
            </div>
          </button>
        </div>
      </div>
    </div>
  </div>
</form>

Labels above
Contribution

A stacked layout with the labels above the form fields. Apply the variant class .spectrum-Form--labelsAbove to the Form itself. You do not need to apply a specific class to the Field label.

Interests
Show markup
<form class="spectrum-Form spectrum-Form--labelsAbove">
  <div class="spectrum-Form-item">
    <label for="fieldLabelExample-company-3" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel">Company Title</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Textfield spectrum-Textfield--multiline">
        <textarea id="fieldLabelExample-company-3" name="field" class="spectrum-Textfield-input"></textarea>
      </div>
    </div>
  </div>
  <div class="spectrum-Form-item">
    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel" for="fieldLabelExample-emailaddress-3">Email Address</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Textfield">
        <input class="spectrum-Textfield-input" aria-invalid="false" type="text" id="fieldLabelExample-emailaddress-3">
      </div>
    </div>
  </div>
  <div class="spectrum-Form-item">
    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel" for="fieldLabelExample-country-3">Country</label>
    <div class="spectrum-Form-itemField">
      <button type="button" class="spectrum-Picker spectrum-Picker--sizeM" aria-haspopup="listbox" id="fieldLabelExample-country-3">
        <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron100" />
        </svg>
      </button>
    </div>
  </div>

  <div class="spectrum-Form-item">
    <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel" role="group" aria-labelledby="checkboxgroup-label-3">Interests</div>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-FieldGroup spectrum-FieldGroup--vertical" id="checkboxgroup-label-3">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3-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">Kittens</span>
        </label>
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3-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">Dogs</span>
        </label>
      </div>
    </div>
  </div>

  <div class="spectrum-Form-item">
    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel" for="fieldLabelExample-stepper-3">Age</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Stepper">
        <div class="spectrum-Textfield spectrum-Stepper-textfield">
          <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5" id="fieldLabelExample-stepper-3">
        </div>
        <div class="spectrum-Stepper-buttons">
          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
            <div class="spectrum-InfieldButton-fill">
              <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                  <use xlink:href="#spectrum-css-icon-Chevron75" />
                </svg>
            </div>
          </button>
          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
            <div class="spectrum-InfieldButton-fill">
              <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Chevron75" />
              </svg>
            </div>
          </button>
        </div>
      </div>
    </div>
  </div>
</form>