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

Form

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

Usage notes

Form provides structure and spacing for your form fields.

Variants

Form (labels left)
Contribution

Apply .spectrum-FieldLabel--left to each FieldLabel to get left labels.

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">
    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--left" for="spectrum-textinput-instance">Interests</label>
    <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>

Form (labels right)
Contribution

Apply .spectrum-FieldLabel--right to each FieldLabel to get right labels.

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">
    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--right" for="spectrum-textinput-instance">Interests</label>
    <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>

Form (labels above)
Contribution

For labels above, the layout changes completely, so you must apply .spectrum-Form--labelsAbove to the Form itself. You do not need to apply a specific class to the FieldLabel.

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">
    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel" for="spectrum-textinput-instance">Interests</label>
    <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" 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>