BcLabel Props

Any extended types: React.LabelHTMLAttributes<HTMLLabelElement>

Building labels

There are three different ways to programmatically associate a label to a form field:

1. <label>
2. aria-label
3. aria-labelledby

Standard [visual] labels

When possible, use <label>.

The <label> tag is associated with a given form field via its for attribute. This value is the id of the associated form field. When a <label> has a valid for attribute users can click on the label and bring focus to its form field.

<label> can wrap an <input>. This creates an implicit label; whilst using for/id creates an explicit label. With the exception of Control inputs, our convention is to keep <label> and <input> separate, label first.

Labelling optional and required fields

Mark optional fields by appending “(optional)” in a subdued text style in the label text.

Do not mark required fields with an asterisk (*).

ℹ️ All form fields must be labelled.

Label text should:

• Be short and clear
• Make sense within the context of its wrapping form or <fieldset>.

⚠️ Placeholder text caution: A field’s default value or placeholder is not a substitute for a label.

Note: display: block is applied.

Note: Some form elements below have different <label> classes (eg Control inputs).

The <label> element represents a human-readable label for a user form input.

These are layout classes:

If <label> is not viable in the markup, use aria-labelledby:

1. Set an id on your faux label
2. Set that id as the value for aria-labelledby, on the associated form field.

This establishes a relationship from the interactive element to the faux label.

Visually-hidden labels

Sometimes in a design form fields may be intuitive by themselves and can forego a visual label (eg. paired username & password fields). Such fields must still be given human-understandable labels.

To add a visually-hidden label to a form field use the aria-label attribute. Simply give it the human-understandable string as the value.

Optional vs required label marking rationale

When building forms we seek to minimize optional questions as much as possible. We then reduce visual clutter of small, repetitive markers on labels by marking the few if any optional fields directly.

Required fields are semantically marked using the required attribute (or equivalent aria-required).

For visual users we deemed this to be an improvement, so long as optional form elements are the exception.

Labels and helper text

A well-labelled form field may benefit from additional instructions or helper text.

Avoid nesting this additional text within the label.

ℹ️ Use the Hint component to style additional descriptive text.

Use aria-describedby to reference additional descriptive text, eg:

1. To markup an overall summary of the <form>
2. To associate the sizing information chart with a form field asking a user’s t-shirt size.

This attribute works via an id identically to how aria-labelledby functions, as described above.

Note this attribute can take multiple values. Use this to associate additional error messages by appending them after any associated descriptive text for form field.

• Fieldsets
• Hint