- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Field label
Component status | Contribution |
---|---|
Current version | @spectrum-css/fieldlabel@8.1.3 |
Released | September 13, 2024 |
S2-foundations | @spectrum-css/fieldlabel@9.0.0-s2-foundations.15 |
Released | October 4, 2024 |
Variants
SizingContribution
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" 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" 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" 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--sizeXL">Life story</label>
<div class="spectrum-Textfield">
<input id="lifestory" name="field" value="" class="spectrum-Textfield-input">
</div>
</div>
</div>
StandardContribution
Show markup
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life story</label>
<div class="spectrum-Textfield">
<input id="lifestory" 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" name="field" value="" class="spectrum-Textfield-input" disabled>
</div>
LeftContribution
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" name="field" value="" class="spectrum-Textfield-input"></textarea>
</div>
RightContribution
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" name="field" value="" class="spectrum-Textfield-input"></textarea>
</div>
RequiredContribution
A Field label for a required field can display either the text “(required)”, or an asterisk. If using the asterisk icon, do not leave any space between the label text and the start of the <svg>
element in the markup, so extra space is not added in addition to the inline margin.
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" 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" 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" 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" name="field" value="" class="spectrum-Textfield-input" disabled>
</div>
Custom Properties API
This component can be modified via its --mod-*
prefixed custom properties. A list of those prefixed custom properties can be found here.
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.