Field Label

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

Usage notes#


Field label for use with form inputs.

Variants#


Standard#
Contribution

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

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

Left#
Contribution

A left aligned field label.

<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--left" style="width: 72px">Life Story</label>

<textarea id="lifestory" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield spectrum-Textfield--multiline"></textarea>
Show markup

A right aligned field label.

<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--right" style="width: 72px">Life Story</label>

<textarea id="lifestory" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield spectrum-Textfield--multiline"></textarea>
Show markup

Required#
Contribution

Field label for a required field.



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

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

<br/>
<br/>

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


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