sp-field-label

Examples API

Attributes and Properties #

Property Attribute Type Default Description
dir dir 'ltr' | 'rtl' 'ltr'
disabled disabled boolean false
for for string ''
id id string ''
required required boolean false
sideAligned side-aligned 'start' | 'end' | undefined
size size ElementSize

Slots #

Name Description
default slot text content of the label

CSS Custom Properties #

Name Default
--spectrum-fieldlabel-l-asterisk-gap var(--spectrum-global-dimension-size-65)
--spectrum-fieldlabel-l-padding-bottom var(--spectrum-global-dimension-size-115)
--spectrum-fieldlabel-l-padding-top var(--spectrum-global-dimension-size-75)
--spectrum-fieldlabel-l-text-font-weight var(--spectrum-alias-body-text-font-weight)
--spectrum-fieldlabel-l-text-line-height var(--spectrum-alias-component-text-line-height)
--spectrum-fieldlabel-l-text-size var(--spectrum-global-dimension-font-size-100)
--spectrum-fieldlabel-m-asterisk-color var(--spectrum-global-color-gray-600)
--spectrum-fieldlabel-m-asterisk-color-disabled var(--spectrum-alias-text-color-disabled)
--spectrum-fieldlabel-m-asterisk-gap var(--spectrum-global-dimension-size-50)
--spectrum-fieldlabel-m-padding-bottom var(--spectrum-global-dimension-size-65)
--spectrum-fieldlabel-m-padding-top var(--spectrum-global-dimension-size-50)
--spectrum-fieldlabel-m-side-asterisk-margin-y var(--spectrum-global-dimension-size-100)
--spectrum-fieldlabel-m-side-padding-right var(--spectrum-global-dimension-size-150)
--spectrum-fieldlabel-m-side-padding-top var(--spectrum-global-dimension-size-100)
--spectrum-fieldlabel-m-text-color var(--spectrum-alias-label-text-color)
--spectrum-fieldlabel-m-text-color-disabled var(--spectrum-alias-text-color-disabled)
--spectrum-fieldlabel-m-text-font-weight var(--spectrum-alias-body-text-font-weight)
--spectrum-fieldlabel-m-text-line-height var(--spectrum-alias-component-text-line-height)
--spectrum-fieldlabel-m-text-size var(--spectrum-global-dimension-font-size-75)
--spectrum-fieldlabel-s-asterisk-gap var(--spectrum-global-dimension-size-50)
--spectrum-fieldlabel-s-padding-bottom var(--spectrum-global-dimension-size-65)
--spectrum-fieldlabel-s-padding-top var(--spectrum-global-dimension-size-50)
--spectrum-fieldlabel-s-text-font-weight var(--spectrum-alias-body-text-font-weight)
--spectrum-fieldlabel-s-text-line-height var(--spectrum-alias-component-text-line-height)
--spectrum-fieldlabel-s-text-size var(--spectrum-global-dimension-font-size-75)
--spectrum-fieldlabel-xl-asterisk-gap var(--spectrum-global-dimension-size-65)
--spectrum-fieldlabel-xl-padding-bottom var(--spectrum-global-dimension-size-130)
--spectrum-fieldlabel-xl-padding-top var(--spectrum-global-dimension-size-115)
--spectrum-fieldlabel-xl-text-font-weight var(--spectrum-alias-body-text-font-weight)
--spectrum-fieldlabel-xl-text-line-height var(--spectrum-alias-component-text-line-height)
--spectrum-fieldlabel-xl-text-size var(--spectrum-global-dimension-font-size-200)

Description #

An <sp-field-label> provides accessible labelling for form elements. Use the for attribute to outline the id of an element in the same DOM tree to which it should associate itself.

Usage #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

yarn add @spectrum-web-components/field-label

Import the side effectful registration of <sp-field-label> via:

import '@spectrum-web-components/field-label/sp-field-label.js';

When looking to leverage the FieldLabel base class as a type and/or for extension purposes, do so via:

import { FieldLabel } from '@spectrum-web-components/field-label';

Sizes #

Small
<sp-field-label for="lifestory-0" size="s">Life Story</sp-field-label>
<sp-textfield
placeholder="Enter your life story"
id="lifestory-0"
>
</sp-textfield>
Medium
<sp-field-label for="lifestory-1" size="m">Life Story</sp-field-label>
<sp-textfield
placeholder="Enter your life story"
id="lifestory-1"
>
</sp-textfield>
Large
<sp-field-label for="lifestory-2" size="l">Life Story</sp-field-label>
<sp-textfield
placeholder="Enter your life story"
id="lifestory-2"
>
</sp-textfield>
Extra Large
<sp-field-label for="lifestory-3" size="xl">Life Story</sp-field-label>
<sp-textfield
placeholder="Enter your life story"
id="lifestory-3"
>
</sp-textfield>

Examples #

<sp-field-label for="lifestory">Life Story</sp-field-label>
<sp-textfield placeholder="Enter your life story" id="lifestory"></sp-textfield>
<sp-field-label for="birth-place">Birthplace</sp-field-label>
<sp-picker id="birth-place">
<span slot="label">Choose a location:</span>
<sp-menu-item>Istanbul</sp-menu-item>
<sp-menu-item>London</sp-menu-item>
<sp-menu-item>Maputo</sp-menu-item>
<sp-menu-item>Melbuorne</sp-menu-item>
<sp-menu-item>New York</sp-menu-item>
<sp-menu-item>San Fransisco</sp-menu-item>
<sp-menu-item>Santiago</sp-menu-item>
<sp-menu-item>Tokyo</sp-menu-item>
</sp-picker>

Side Aligned #

Using the side-aligned attribute will display the <sp-field-label> element inline with surrounding elements and the start and end values outline the alignment of the label text in the width specified.

Start #

Use side-aligned="start" to display the <sp-field-label> inline and to align the label text to the "start" of the flow of text:

<sp-field-label for="lifestory-1" side-aligned="start" style="width: 120px">
Life Story
</sp-field-label>
<sp-textfield
placeholder="Enter your life story"
id="lifestory-1"
>
</sp-textfield>
<br />
<br />
<sp-field-label
for="birth-place-1"
side-aligned="start"
required
style="width: 120px"
>

Birthplace
</sp-field-label>
<sp-picker id="birth-place-1">
<span slot="label">Choose a location:</span>
<sp-menu-item>Istanbul</sp-menu-item>
<sp-menu-item>London</sp-menu-item>
<sp-menu-item>Maputo</sp-menu-item>
<sp-menu-item>Melbuorne</sp-menu-item>
<sp-menu-item>New York</sp-menu-item>
<sp-menu-item>San Fransisco</sp-menu-item>
<sp-menu-item>Santiago</sp-menu-item>
<sp-menu-item>Tokyo</sp-menu-item>
</sp-picker>

End #

Use side-aligned="end" to display the <sp-field-label> inline and to align the label text to the "end" of the flow of text:

<sp-field-label
for="lifestory-1"
side-aligned="end"
required
style="width: 120px"
>

Life Story
</sp-field-label>
<sp-textfield
placeholder="Enter your life story"
id="lifestory-1"
>
</sp-textfield>
<br />
<br />
<sp-field-label for="birth-place-1" side-aligned="end" style="width: 120px">
Birthplace
</sp-field-label>
<sp-picker id="birth-place-1">
<span slot="label">Choose a location:</span>
<sp-menu-item>Istanbul</sp-menu-item>
<sp-menu-item>London</sp-menu-item>
<sp-menu-item>Maputo</sp-menu-item>
<sp-menu-item>Melbuorne</sp-menu-item>
<sp-menu-item>New York</sp-menu-item>
<sp-menu-item>San Fransisco</sp-menu-item>
<sp-menu-item>Santiago</sp-menu-item>
<sp-menu-item>Tokyo</sp-menu-item>
</sp-picker>