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
, orPhone 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
_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
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
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".