sp-field-label
NPM
0.48.1
Storybook
View Storybook
Try it on
webcomponents.dev
Attributes and Properties #
disabled
disabled
boolean
false
for
for
string
''
id
id
string
''
required
required
boolean
false
sideAligned
side-aligned
'start' | 'end' | undefined
Slots #
default slot
0.48.1 (2024-10-01) #
Note: Version bump only for package @spectrum-web-components/field-label
0.48.0 (2024-09-17) #
Note: Version bump only for package @spectrum-web-components/field-label
0.47.2 (2024-09-03) #
Note: Version bump only for package @spectrum-web-components/field-label
0.47.1 (2024-08-27) #
Note: Version bump only for package @spectrum-web-components/field-label
0.47.0 (2024-08-20) #
Note: Version bump only for package @spectrum-web-components/field-label
0.46.0 (2024-08-08) #
Note: Version bump only for package @spectrum-web-components/field-label
0.45.0 (2024-07-30) #
Note: Version bump only for package @spectrum-web-components/field-label
0.44.0 (2024-07-15) #
Note: Version bump only for package @spectrum-web-components/field-label
0.43.0 (2024-06-11) #
Note: Version bump only for package @spectrum-web-components/field-label
0.42.5 (2024-05-24) #
Note: Version bump only for package @spectrum-web-components/field-label
0.42.4 (2024-05-14) #
Note: Version bump only for package @spectrum-web-components/field-label
0.42.3 (2024-05-01) #
Note: Version bump only for package @spectrum-web-components/field-label
0.42.2 (2024-04-03) #
Note: Version bump only for package @spectrum-web-components/field-label
0.42.1 (2024-04-02) #
Note: Version bump only for package @spectrum-web-components/field-label
0.42.0 (2024-03-19) #
Features #
- asset: use core tokens (
99e76f4 )
0.41.2 (2024-03-05) #
Bug Fixes #
- picker: support inline labeling of quiet Picker (
#3704 ) (3372286 )
0.41.1 (2024-02-22) #
Note: Version bump only for package @spectrum-web-components/field-label
0.41.0 (2024-02-13) #
Note: Version bump only for package @spectrum-web-components/field-label
0.40.5 (2024-02-05) #
Note: Version bump only for package @spectrum-web-components/field-label
0.40.4 (2024-01-29) #
Note: Version bump only for package @spectrum-web-components/field-label
0.40.3 (2024-01-11) #
Note: Version bump only for package @spectrum-web-components/field-label
0.40.2 (2023-12-18) #
Note: Version bump only for package @spectrum-web-components/field-label
0.40.1 (2023-12-05) #
Note: Version bump only for package @spectrum-web-components/field-label
0.40.0 (2023-11-16) #
Note: Version bump only for package @spectrum-web-components/field-label
0.39.4 (2023-11-02) #
Bug Fixes #
- support numeric IDs when resolving elements (
f62bf0d )
0.39.3 (2023-10-18) #
Note: Version bump only for package @spectrum-web-components/field-label
0.39.2 (2023-10-13) #
Note: Version bump only for package @spectrum-web-components/field-label
0.39.1 (2023-10-06) #
Note: Version bump only for package @spectrum-web-components/field-label
0.39.0 (2023-09-25) #
Bug Fixes #
- slider: add t-shirt sizing (
24dac78 )
0.38.0 (2023-09-05) #
Note: Version bump only for package @spectrum-web-components/field-label
0.37.0 (2023-08-18) #
Note: Version bump only for package @spectrum-web-components/field-label
0.36.0 (2023-08-18) #
Note: Version bump only for package @spectrum-web-components/field-label
0.35.0 (2023-07-31) #
Note: Version bump only for package @spectrum-web-components/field-label
0.34.0 (2023-07-11) #
Bug Fixes #
- picker: correct label application for screen readers (
8ce0cb0 )
0.33.2 (2023-06-14) #
Note: Version bump only for package @spectrum-web-components/field-label
0.33.0 (2023-06-08) #
Note: Version bump only for package @spectrum-web-components/field-label
0.32.0 (2023-06-01) #
Features #
- slider: use spectrum-tokens (
8b1e72c )
0.31.0 (2023-05-17) #
Note: Version bump only for package @spectrum-web-components/field-label
0.30.0 (2023-05-03) #
Bug Fixes #
- add "editable" option to "sp-slider" (
e86d7fa ) - allow sp-dropdown to accept focus visibly from sp-field-label (
134bafc ) - field-label: do not assume a target is available and surface t-shirt sizing (
c5daead ) - move property management into update or willUpdate (
f66069f ) - remove
usage where deprecated ( 387db3b ) - update export patterns (
b2da444 ) - update to latest spectrum-css packages (
a5ca19f )
Features #
- action-button: add action button pattern (
03ac00a ) - add t-shirt sizing to the Radio pattern (
fc49343 ) - adopt DNA@7 base Spectrum CSS (
e08cafd ) - field-label: add field label pattern (
2fa7c7e ) - field-label: update spectrum css input (
80a993d ) - field-label: use core tokens (
8db7ac4 ) - icons-workflow: vend fully registered icon components (
941f3a4 ) - include all Dev Mode files in side effects (
f70817c ) - picker: process field-label content for more accurate a11y tree (
dc9df54 ) - shared pkg versions, devmode define warning, registry-conflicts docs (
6e49565 ) - tabs: add sp-tab-panel element (
b17d276 ) - use latest exports specification (
a7ecf4b )
0.10.10 (2023-04-24) #
Note: Version bump only for package @spectrum-web-components/field-label
0.10.9 (2023-04-05) #
Note: Version bump only for package @spectrum-web-components/field-label
0.10.8 (2023-03-22) #
Note: Version bump only for package @spectrum-web-components/field-label
0.10.7 (2023-03-08) #
Note: Version bump only for package @spectrum-web-components/field-label
0.10.6 (2023-02-08) #
Note: Version bump only for package @spectrum-web-components/field-label
0.10.5 (2023-01-23) #
Note: Version bump only for package @spectrum-web-components/field-label
0.10.4 (2023-01-09) #
Note: Version bump only for package @spectrum-web-components/field-label
0.10.3 (2022-12-08) #
Note: Version bump only for package @spectrum-web-components/field-label
0.10.2 (2022-11-21) #
Note: Version bump only for package @spectrum-web-components/field-label
0.10.1 (2022-11-14) #
Note: Version bump only for package @spectrum-web-components/field-label
0.10.0 (2022-10-28) #
Features #
- field-label: use core tokens (
8db7ac4 )
0.9.1 (2022-10-17) #
Note: Version bump only for package @spectrum-web-components/field-label
0.9.0 (2022-10-10) #
Features #
- add t-shirt sizing to the Radio pattern (
fc49343 )
0.8.0 (2022-08-09) #
Features #
- include all Dev Mode files in side effects (
f70817c )
0.7.14 (2022-08-04) #
Note: Version bump only for package @spectrum-web-components/field-label
0.7.13 (2022-07-18) #
Note: Version bump only for package @spectrum-web-components/field-label
0.7.12 (2022-06-29) #
Note: Version bump only for package @spectrum-web-components/field-label
0.7.11 (2022-06-07) #
Note: Version bump only for package @spectrum-web-components/field-label
0.7.10 (2022-05-27) #
Note: Version bump only for package @spectrum-web-components/field-label
0.7.9 (2022-05-12) #
Bug Fixes #
- move property management into update or willUpdate (
f66069f )
0.7.8 (2022-04-21) #
Note: Version bump only for package @spectrum-web-components/field-label
0.7.7 (2022-03-30) #
Note: Version bump only for package @spectrum-web-components/field-label
0.7.6 (2022-03-08) #
Note: Version bump only for package @spectrum-web-components/field-label
0.7.5 (2022-03-04) #
Note: Version bump only for package @spectrum-web-components/field-label
0.7.4 (2022-02-22) #
Note: Version bump only for package @spectrum-web-components/field-label
0.7.3 (2022-01-26) #
Note: Version bump only for package @spectrum-web-components/field-label
0.7.2 (2022-01-07) #
Note: Version bump only for package @spectrum-web-components/field-label
0.7.1 (2021-12-13) #
Note: Version bump only for package @spectrum-web-components/field-label
0.7.0 (2021-11-08) #
Note: Version bump only for package @spectrum-web-components/field-label
0.6.1 (2021-11-08) #
Note: Version bump only for package @spectrum-web-components/field-label
0.6.0 (2021-11-02) #
Features #
- adopt DNA@7 base Spectrum CSS (
e08cafd )
0.5.9 (2021-10-12) #
Note: Version bump only for package @spectrum-web-components/field-label
0.5.8 (2021-09-20) #
Note: Version bump only for package @spectrum-web-components/field-label
0.5.7 (2021-09-13) #
Note: Version bump only for package @spectrum-web-components/field-label
0.5.6 (2021-08-24) #
Note: Version bump only for package @spectrum-web-components/field-label
0.5.5 (2021-08-17) #
Bug Fixes #
- add "editable" option to "sp-slider" (
e86d7fa )
0.5.4 (2021-08-03) #
Note: Version bump only for package @spectrum-web-components/field-label
0.5.3 (2021-07-22) #
Note: Version bump only for package @spectrum-web-components/field-label
0.5.2 (2021-07-01) #
Note: Version bump only for package @spectrum-web-components/field-label
0.5.1 (2021-06-16) #
Note: Version bump only for package @spectrum-web-components/field-label
0.5.0 (2021-05-24) #
Features #
- tabs: add sp-tab-panel element (
b17d276 )
0.4.5 (2021-05-12) #
Note: Version bump only for package @spectrum-web-components/field-label
0.4.4 (2021-04-15) #
Note: Version bump only for package @spectrum-web-components/field-label
0.4.3 (2021-04-09) #
Note: Version bump only for package @spectrum-web-components/field-label
0.4.2 (2021-03-29) #
Note: Version bump only for package @spectrum-web-components/field-label
0.4.1 (2021-03-22) #
Note: Version bump only for package @spectrum-web-components/field-label
0.4.0 (2021-03-22) #
Bug Fixes #
- remove
usage where deprecated ( 387db3b )
Features #
- picker: process field-label content for more accurate a11y tree (
dc9df54 )
0.3.1 (2021-03-05) #
Note: Version bump only for package @spectrum-web-components/field-label
0.3.0 (2021-03-04) #
Features #
- use latest exports specification (
a7ecf4b )
0.2.3 (2021-02-11) #
Bug Fixes #
- update to latest spectrum-css packages (
a5ca19f )
0.2.2 (2021-02-02) #
Note: Version bump only for package @spectrum-web-components/field-label
0.2.1 (2021-01-28) #
Note: Version bump only for package @spectrum-web-components/field-label
0.2.0 (2021-01-21) #
Bug Fixes #
- field-label: do not assume a target is available and surface t-shirt sizing (
c5daead ) - allow sp-dropdown to accept focus visibly from sp-field-label (
134bafc ) - update export patterns (
b2da444 )
Features #
- action-button: add action button pattern (
03ac00a ) - field-label: add field label pattern (
2fa7c7e ) - field-label: update spectrum css input (
80a993d ) - icons-workflow: vend fully registered icon components (
941f3a4 )
0.1.0 (2021-01-13) #
Bug Fixes #
- allow sp-dropdown to accept focus visibly from sp-field-label (
134bafc ) - update export patterns (
b2da444 )
Features #
- action-button: add action button pattern (
03ac00a ) - field-label: add field label pattern (
2fa7c7e ) - field-label: update spectrum css input (
80a993d ) - icons-workflow: vend fully registered icon components (
941f3a4 )
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 #
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 #
<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>
<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>
<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>
<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>