Form

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/fieldlabel@2.0.0

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.

<form class="spectrum-Form">
  <div class="spectrum-Form-item">
    <label for="fieldLabelExample-lifestory" class="spectrum-Form-itemLabel spectrum-FieldLabel--left">Company Title</label>
    <div class="spectrum-Form-itemField">
      <textarea id="fieldLabelExample-lifestory" placeholder="Enter your life story" name="field" class="spectrum-Textfield spectrum-Textfield--multiline"></textarea>
    </div>
  </div>
  <div class="spectrum-Form-item">
    <label class="spectrum-Form-itemLabel spectrum-FieldLabel--left" for="fieldLabelExample-emailaddress">Email Address</label>
    <div class="spectrum-Form-itemField">
      <input class="spectrum-Textfield" aria-invalid="false" type="text" placeholder="Enter your e-mail address" id="fieldLabelExample-emailaddress">
    </div>
  </div>
  <div class="spectrum-Form-item">
    <label class="spectrum-Form-itemLabel spectrum-FieldLabel--left" for="spectrum-textinput-instance">Country</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Dropdown" style="width: 195px;">
        <button class="spectrum-FieldButton spectrum-Dropdown-trigger" aria-haspopup="true">
          <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <div class="spectrum-Form-item">
    <label class="spectrum-Form-itemLabel spectrum-FieldLabel--left" for="spectrum-textinput-instance">Interests</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
        <div class="spectrum-Radio">
          <input type="radio" name="animals" class="spectrum-Radio-input" id="radio-5">
          <span class="spectrum-Radio-button"></span>
          <label class="spectrum-Radio-label" for="radio-5">Kittens</label>
        </div>
        <div class="spectrum-Radio">
          <input type="radio" name="animals" class="spectrum-Radio-input" id="radio-6">
          <span class="spectrum-Radio-button"></span>
          <label class="spectrum-Radio-label" for="radio-6">Dogs</label>
        </div>
      </div>

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

  <div class="spectrum-Form-item">
    <label class="spectrum-Form-itemLabel spectrum-FieldLabel--left" for="fieldLabelExample-stepper">Age</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Stepper">
        <input type="number" class="spectrum-Textfield spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5" id="fieldLabelExample-stepper">
        <span class="spectrum-Stepper-buttons">
          <button class="spectrum-ActionButton spectrum-Stepper-stepUp" tabindex="-1">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
            </svg>
          </button>
          <button class="spectrum-ActionButton spectrum-Stepper-stepDown" tabindex="-1">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
            </svg>
          </button>
        </span>
      </div>
    </div>
  </div>
</form>
Show markup

Form (labels right)#
Contribution

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

<form class="spectrum-Form">
  <div class="spectrum-Form-item">
    <label for="fieldLabelExample-lifestory" class="spectrum-Form-itemLabel spectrum-FieldLabel--right">Company Title</label>
    <div class="spectrum-Form-itemField">
      <textarea id="fieldLabelExample-lifestory" placeholder="Enter your life story" name="field" class="spectrum-Textfield spectrum-Textfield--multiline"></textarea>
    </div>
  </div>
  <div class="spectrum-Form-item">
    <label class="spectrum-Form-itemLabel spectrum-FieldLabel--right" for="fieldLabelExample-emailaddress">Email Address</label>
    <div class="spectrum-Form-itemField">
      <input class="spectrum-Textfield" aria-invalid="false" type="text" placeholder="Enter your e-mail address" id="fieldLabelExample-emailaddress">
    </div>
  </div>
  <div class="spectrum-Form-item">
    <label class="spectrum-Form-itemLabel spectrum-FieldLabel--right" for="spectrum-textinput-instance">Country</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Dropdown" style="width: 195px;">
        <button class="spectrum-FieldButton spectrum-Dropdown-trigger" aria-haspopup="true">
          <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <div class="spectrum-Form-item">
    <label class="spectrum-Form-itemLabel spectrum-FieldLabel--right" for="spectrum-textinput-instance">Interests</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
        <div class="spectrum-Radio">
          <input type="radio" name="animals" class="spectrum-Radio-input" id="radio-5">
          <span class="spectrum-Radio-button"></span>
          <label class="spectrum-Radio-label" for="radio-5">Kittens</label>
        </div>
        <div class="spectrum-Radio">
          <input type="radio" name="animals" class="spectrum-Radio-input" id="radio-6">
          <span class="spectrum-Radio-button"></span>
          <label class="spectrum-Radio-label" for="radio-6">Dogs</label>
        </div>
      </div>

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

  <div class="spectrum-Form-item">
    <label class="spectrum-Form-itemLabel spectrum-FieldLabel--right" for="fieldLabelExample-stepper">Age</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Stepper">
        <input type="number" class="spectrum-Textfield spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5" id="fieldLabelExample-stepper">
        <span class="spectrum-Stepper-buttons">
          <button class="spectrum-ActionButton spectrum-Stepper-stepUp" tabindex="-1">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
            </svg>
          </button>
          <button class="spectrum-ActionButton spectrum-Stepper-stepDown" tabindex="-1">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
            </svg>
          </button>
        </span>
      </div>
    </div>
  </div>
</form>
Show markup

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.

<form class="spectrum-Form spectrum-Form--labelsAbove">
  <div class="spectrum-Form-item">
    <label for="fieldLabelExample-lifestory" class="spectrum-Form-itemLabel">Company Title</label>
    <div class="spectrum-Form-itemField">
      <textarea id="fieldLabelExample-lifestory" placeholder="Enter your life story" name="field" class="spectrum-Textfield spectrum-Textfield--multiline"></textarea>
    </div>
  </div>
  <div class="spectrum-Form-item">
    <label class="spectrum-Form-itemLabel" for="fieldLabelExample-emailaddress">Email Address</label>
    <div class="spectrum-Form-itemField">
      <input class="spectrum-Textfield" aria-invalid="false" type="text" placeholder="Enter your e-mail address" id="fieldLabelExample-emailaddress">
    </div>
  </div>
  <div class="spectrum-Form-item">
    <label class="spectrum-Form-itemLabel" for="spectrum-textinput-instance">Country</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Dropdown" style="width: 195px;">
        <button class="spectrum-FieldButton spectrum-Dropdown-trigger" aria-haspopup="true">
          <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <div class="spectrum-Form-item">
    <label class="spectrum-Form-itemLabel" for="spectrum-textinput-instance">Interests</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
        <div class="spectrum-Radio">
          <input type="radio" name="animals" class="spectrum-Radio-input" id="radio-5">
          <span class="spectrum-Radio-button"></span>
          <label class="spectrum-Radio-label" for="radio-5">Kittens</label>
        </div>
        <div class="spectrum-Radio">
          <input type="radio" name="animals" class="spectrum-Radio-input" id="radio-6">
          <span class="spectrum-Radio-button"></span>
          <label class="spectrum-Radio-label" for="radio-6">Dogs</label>
        </div>
      </div>

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

  <div class="spectrum-Form-item">
    <label class="spectrum-Form-itemLabel" for="fieldLabelExample-stepper">Age</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Stepper">
        <input type="number" class="spectrum-Textfield spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5" id="fieldLabelExample-stepper">
        <span class="spectrum-Stepper-buttons">
          <button class="spectrum-ActionButton spectrum-Stepper-stepUp" tabindex="-1">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
            </svg>
          </button>
          <button class="spectrum-ActionButton spectrum-Stepper-stepDown" tabindex="-1">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
            </svg>
          </button>
        </span>
      </div>
    </div>
  </div>
</form>
Show markup