• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Field label

Component status
Contribution
Last releasedUnreleased
Current version@spectrum-css/fieldlabel@3.0.3

Variants


Sizing
Contribution

S

M (default)

L

XL

Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>

    <label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeS">Life Story</label>
    <div class="spectrum-Textfield">
      <input id="lifestory" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield-input">
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>

    <label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life Story</label>
    <div class="spectrum-Textfield">
      <input id="lifestory" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield-input">
    </div>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>

    <label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeL">Life Story</label>
    <div class="spectrum-Textfield">
      <input id="lifestory" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield-input">
    </div>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>

    <label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeL">Life Story</label>
    <div class="spectrum-Textfield">
      <input id="lifestory" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield-input">
    </div>
  </div>
</div>

Standard
Contribution

Show markup
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life Story</label>
<div class="spectrum-Textfield">
  <input id="lifestory" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield-input">
</div>

<label for="lifestory2" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM is-disabled">Life Story</label>
<div class="spectrum-Textfield is-disabled">
  <input id="lifestory2" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield-input" disabled>
</div>

Left
Contribution

A left aligned field label.

Show markup
<label for="lifestory3" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--left" style="width: 72px">Life Story</label>

<div class="spectrum-Textfield spectrum-Textfield--multiline">
  <textarea id="lifestory3" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield-input"></textarea>
</div>

A right aligned field label.

Show markup
<label for="lifestory4" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--right" style="width: 72px">Life Story</label>

<div class="spectrum-Textfield spectrum-Textfield--multiline">
  <textarea id="lifestory4" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield-input"></textarea>
</div>

Required
Contribution

Field label for a required field.



Show markup
<label for="lifestory5" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life Story
  <svg class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Asterisk100" />
  </svg>
</label>
<div class="spectrum-Textfield">
  <input id="lifestory5" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield-input">
</div>

<label for="lifestory6" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life Story (Required)</label>
<div class="spectrum-Textfield">
  <input id="lifestory6" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield-input">
</div>

<br/>
<br/>

<label for="lifestory7" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--left">Life Story
  <svg class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Asterisk100" />
  </svg>
</label>
<div class="spectrum-Textfield spectrum-Textfield--multiline">
  <textarea id="lifestory7" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield-input"></textarea>
</div>


<label for="lifestory8" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM is-disabled">Life Story
  <svg class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Asterisk100" />
  </svg>
</label>
<div class="spectrum-Textfield is-disabled">
  <input id="lifestory8" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield-input" disabled>
</div>

Migration Guide


T-shirt sizing

Field Label now supports t-shirt sizing and requires that you specify the size by adding a .spectrum-FieldLabel--size* class.