Label

The Label suite consists of three interrelated components designed to enhance form fields by providing clear labels, additional context through descriptions, and structured grouping according to design specifications. The Label component is used for field naming and can indicate required fields, LabelDescription offers supplementary information, and LabelGroup organizes these elements into a cohesive unit. Together, they ensure that form fields are accessible, understandable, and visually consistent.

Effective Practices

When using these components, consider the following best practices:

Clarity: Use clear and concise text for labels and label descriptions to ensure they are easily understood by users.
Semantic Structure: Use LabelGroup to structure labels and their descriptions together, ensuring a clean and organized layout.
Context: Utilize the LabelDescription component to add additional context or instructions related to the form field. This can help users understand more complex inputs or requirements.
Required Fields: When marking a field as required, consider adding text in the label to explain what makes the field required to provide a better user experience.
Accessibility: Always associate labels with their respective form elements using the Label component’s htmlFor prop. This is crucial for screen reader users.

Usage Guidelines

Label

Displays text for the form element and can show an asterisk (*) when the field is required.

This is a label

<Label>This is a label</Label>

This is a label with a required flag*

<Label required>This is a label with a required flag</Label>

LabelDescription

Provides additional information or context beneath a label.

Optional description goes here

<LabelDescription>Optional description goes here</LabelDescription>

LabelGroup

Used to group Label and LabelDescription components, LabelGroup ensures that labels and their corresponding descriptions are structured vertically, in accordance with design specifications. This layout enhances the visual organization of forms, making it easier for users to follow and interact with.

This is a label*Optional description goes here

<LabelGroup>
  <Label required>This is a label</Label>
  <LabelDescription>Optional description goes here</LabelDescription>
</LabelGroup>

Props

Label Props

interface LabelProps

required ? boolean

Displays a required indicator next to the label.