sp-field-label

NPM

0.44.0

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API Changelog

Attributes and Properties #

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

Slots #

Name Description default slot text content of the 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 #

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>