Label | Parsley Design System

Examples

Default

A test form control label

Code

1<Label forId="a-test">A test form control label</Label>

With field declaration

Required: A test form control label (required)

Optional: A test form control label (optional)

Code

1<Label forId="a-test" declaration="required">A test form control label</Label>
2
3<Label forId="a-test" declaration="optional" required={false}>A test form control label</Label>

With a different size applied

A test form control labelA test form control labelA test form control label

Code

1<Label forId="a-test" size="small">A test form control label</Label>
2
3<Label forId="a-test">A test form control label</Label>
4
5<Label forId="a-test" size="large">A test form control label</Label>

With label element hidden

A test form control label

Code

1<Label forId="a-test" labelHidden>A test form control label</Label>

With label context applied

A test form control label When typing a suggested list of options will appear, use arrow keys to operate

Code

1<Label forId="a-test" labelContext="When typing a suggested list of options will appear, use arrow keys to operate">A test form control label</Label>

With contextual action

A test form control label

Code

1<Label forId="a-test" labelAction={() => {}} labelActionText="Contextual action">A test form control label</Label>

Design

Provide labels to identify all form controls, labels are used to describe an associated form control.

Problem

As a customer, I need to understand what data input is required for a form control.
As a designer, I want the customer to easily understand what data is required for a form control.

Solution

Present the customer with a clear label that describes what the required data input is.

Guidance

Best practice guidance: Visible labels are recommended for all form controls.; Only to be used for labelling form controls; All label elements in Parsley Design System utilise an explicit association with their form control, as such the for attribute is required.; Linked labels and form controls allow users to click on the label name which then sets focus to the associated form control.; Use a short, meaningful label to describe the input data of the form control.; Provide sufficient details for the customer without being too verbose.; Use additional help text to support the form label if this will help the user enter the data correctly.; Use sentence case for the label with the exception of titles or names.; Use reverse pyramid writing, starting with the most important information first.

Development

Import by:

1import { Label } from '@parsley_design_systems/design-system'

Available props

Props for the Label component
Property	Type	Default	Required	Description
children	string		true	The primary content to describe the associated form control, the label value must display a meaningful description to ensure the form control is correctly understood by users.
size	oneOf: default \| small \| large	default	false	Sets the size of the label, this props controls the font size of the label. If not set "default" is output as the default setting.
required	boolean		true	A boolean that applies an aria-required value on the form control.
declaration	required \| option			Displays required or optional text next to the associated label.
labelHidden	boolean	false	false	A boolean that visually hides the form control label. This should only be considered if the form control is clearly described by adjacent content/labels.
labelContext	string		false	Allows for additional instructions to be inserted into the label element, this content is visually hidden and can be used to provide additional context to a form control for assistive technolgy users.
labelAction	function		false	Provides the function to initiate the contextual action.
labelActionText	ReactNode		false	Provides the content of the contextual action.
ref	string		false	Allows a ref to be set on the form control.