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

Label

Usage

Import the component


_10import { 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";

For details, see Importing FastStore UI component styles.

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

Email Address

Label with custom attributes

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

Example

Code

Password

Data attributes

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

data-fs-label

Props

Name	Type	Description	Default
testId	`string`	ID 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".