## Overview An `` 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. Field labels give context to information that a user needs to input and are commonly used in forms to provide users with clear guidance about what information is required. ### Usage [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/field-label?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/field-label) [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/field-label?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/field-label) [![Try it on Stackblitz](https://img.shields.io/badge/Try%20it%20on-Stackblitz-blue?style=for-the-badge)](https://stackblitz.com/edit/vitejs-vite-zqj9achu) ``` yarn add @spectrum-web-components/field-label ``` Import the side effectful registration of `` via: ```ts 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: ```ts import { FieldLabel } from '@spectrum-web-components/field-label'; ``` ### Anatomy Field labels can be associated with form elements by using the `for` attribute, which should reference the `id` of the related input element. ```html demo Product name ``` Field labels can also be used to label a group of related inputs: ```html demo Account type Admin Member Guest ``` ### Options #### Sizes Small ```html demo Life Story (Small) ``` Medium ```html demo Life Story (Medium) ``` Large ```html demo Life Story (Large) ``` Extra Large ```html demo Life Story (Extra Large) ``` #### Label Position Field labels can be positioned either on top of an input (default) or to the side of an input. The top position is recommended for most cases as it works better with long text, localization, and responsive layouts. Using the `side-aligned` attribute will display the `` element inline with surrounding elements and the `start` and `end` values outline the alignment of the label text in the width specified. Top (Default) ```html demo Country ``` Side (Start Aligned) Use `side-aligned="start"` to display the `` inline and to align the label text to the "start" of the flow of text: ```html demo Life Story

Birthplace Choose a location: Istanbul London Maputo Melbourne New York San Francisco Santiago Tokyo ``` Side (End Aligned) Use `side-aligned="end"` to display the `` inline and to align the label text to the "end" of the flow of text: ```html demo Life Story

Birthplace Choose a location: Istanbul London Maputo Melbourne New York San Francisco Santiago Tokyo ``` #### Necessity Indicator Field labels can indicate whether an input is required or optional. By default, required fields are marked with an asterisk icon. Required (Icon) ```html demo Full name ``` Optional (Text) ```html demo Profile description (optional) ``` ### States #### Disabled When the associated input field is disabled, the field label should also be disabled. ```html demo Country ``` ### Behaviors #### Text Overflow When a field label is too long for the available horizontal space, it wraps to form another line. ```html demo What you're hoping to learn from the seminar and any specific topics you'd like covered ``` ### Accessibility #### Always include a label Every input should have a label. An input without a label is ambiguous and not accessible. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be visually hidden but should still include an `aria-label` in HTML. #### Ensure proper association The `for` attribute of the field label should match the `id` attribute of the associated input element to ensure proper association for screen readers and other assistive technologies. #### Keep labels concise Use a short, descriptive label (1-3 words) for the information that users need to provide. Supplementary information or requirements should be shown in help text below the field, not in the label. #### Use sentence case Following Adobe's UX writing style, field labels should be written in sentence case unless they contain words that are branded terms. #### Don't add a colon at the end of a field label The design of the component already communicates the relationship between the label and the input field, so a colon is unnecessary. #### Mark only required or only optional fields, not both In a single form, mark only the required fields or only the optional fields, depending on whichever is less frequent in the entire form. This reduces visual noise and makes the form easier to understand.