Documentation
Feedback
Guides
Storefront Development

Storefront Development
Storefront development

Label

Labels describe the meaning of input fields.

The Label component provides accessible text descriptions for form controls, helping users understand the purpose and expected input of each field. Typical use cases include:
  • Describing the purpose of input fields (e.g., Email Address, Password, or Phone Number).
  • Associating descriptive text with form elements for improved accessibility.
  • Providing context for user interactions in forms and surveys.
Example
Code

Usage

Import the component


_10
import { Label } from "@faststore/ui";

Import styles

To apply styles, include the following in your stylesheet:

_10
@import "@faststore/ui/src/components/atoms/Label/styles.scss";


Examples

Label with Input

Labels are commonly used to describe input fields. Use the htmlFor attribute to associate the label with the Input component.
Example
Code

Label with custom attributes

You can pass additional HTML attributes to customize the label behavior.
Example
Code

Data attributes

You can target and override Label styles using the following data attributes:
data-fs-label

Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-label

Best practices

✅ Dos

  • Use clear and concise text that accurately describes the expected input. Be specific about what information is required.
  • Ensure labels remain visible at all times and are not replaced by placeholders.
  • Keep label text short and to the point, avoiding unnecessary words.

❌ Don'ts

  • Don't use placeholder text as a substitute for labels, as placeholders disappear when users start typing.
  • Don't hide labels visually while keeping them only for screen readers.
  • Don't use vague or generic text like "Enter value" or "Field".
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
Was this helpful?
Suggest edits (GitHub)
On this page