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

Form

Component status
Contribution
Last releasedNovember 9, 2023
Current version@spectrum-css/fieldlabel@7.1.3
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-lifestory" 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-lifestory" placeholder="Enter your life story" 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">Email Address</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Textfield">
        <input class="spectrum-Textfield-input" aria-invalid="false" type="text" placeholder="Enter your e-mail address" id="fieldLabelExample-emailaddress">
      </div>
    </div>
  </div>
  <div class="spectrum-Form-item">
    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--left" for="spectrum-textinput-instance">Country</label>
    <div class="spectrum-Form-itemField">
      <button class="spectrum-Picker spectrum-Picker--sizeM" aria-haspopup="true">
        <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-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" 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">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" placeholder="Enter a number" min="-2" max="2" step="0.5" id="fieldLabelExample-stepper">
        </div>
        <span class="spectrum-Stepper-buttons">
          <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepUp" tabindex="-1">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Chevron75" />
            </svg>
          </button>
          <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepDown" tabindex="-1">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Chevron75" />
            </svg>
          </button>
        </span>
      </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-lifestory" 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-lifestory" placeholder="Enter your life story" 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">Email Address</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Textfield">
        <input class="spectrum-Textfield-input" aria-invalid="false" type="text" placeholder="Enter your e-mail address" id="fieldLabelExample-emailaddress">
      </div>
    </div>
  </div>
  <div class="spectrum-Form-item">
    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--right" for="spectrum-textinput-instance">Country</label>
    <div class="spectrum-Form-itemField">
      <button class="spectrum-Picker spectrum-Picker--sizeM" aria-haspopup="true">
        <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-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" 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">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" placeholder="Enter a number" min="-2" max="2" step="0.5" id="fieldLabelExample-stepper">
        </div>
        <span class="spectrum-Stepper-buttons">
          <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepUp" tabindex="-1">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Chevron75" />
            </svg>
          </button>
          <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepDown" tabindex="-1">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Chevron75" />
            </svg>
          </button>
        </span>
      </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-lifestory" 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-lifestory" placeholder="Enter your life story" 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">Email Address</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Textfield">
        <input class="spectrum-Textfield-input" aria-invalid="false" type="text" placeholder="Enter your e-mail address" id="fieldLabelExample-emailaddress">
      </div>
    </div>
  </div>
  <div class="spectrum-Form-item">
    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel" for="spectrum-textinput-instance">Country</label>
    <div class="spectrum-Form-itemField">
      <button class="spectrum-Picker spectrum-Picker--sizeM" aria-haspopup="true">
        <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-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" 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">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" placeholder="Enter a number" min="-2" max="2" step="0.5" id="fieldLabelExample-stepper">
        </div>
        <span class="spectrum-Stepper-buttons">
          <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepUp" tabindex="-1">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Chevron75" />
            </svg>
          </button>
          <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepDown" tabindex="-1">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Chevron75" />
            </svg>
          </button>
        </span>
      </div>
    </div>
  </div>
</form>