A Label provides a descriptive title for a form input. Having labels is essential when filling out a form, since each field is associated with its label.
The Label component will be placed above each form Field. An optional indicator, a tooltip, and a description could also be included next to the label text.
The Label may include the following elements:
- Icon (optional)
A start icon can be included to visually enhance the label's context. This icon is fully customizable and any icon from the provided list can be used. Use a simple icon that is easily comprehensible to users.
- Label text
A clear and descriptive title for the form field that tells the user what information to enter.
- Field indicator (optional)
Subtle text indicating that the field associated with the label is not required.
- Description (optional)
Subtle descriptive text that provides additional information about the field.
Refer to the Label component in Codex Figma.
Label includes only two states:
You should consider using the Field component, which includes the Label component and handles accessibility features like ARIA attributes internally. If you need more custom behavior, you can use the Label component on its own.
Short description text
|Note: For icon properties, the relevant icon also needs to be imported from the |
When using the Label component with an input, make sure to add an
id attribute to the input and use that to set the
for attribute on the label. These attributes will be applied on the proper element within each component (in the example below, that's the
<label> for the Label component, and the
<input> for the TextInput).
In rare instances, you may not need a visible label if it's very clear from context how to use an input. To achieve this, you can use the Label component to create a semantic label for assistive technology, but add the
visuallyHidden prop to visually hide the label.
Note that this will hide the entire output of the component, including the description.
Sort by: latest
With rich description text
You can include markup in the
description slot. Only links and text formatting are recommended as description text should be concise.
Label vs. legend
This component outputs a
<label> element by default. When the
isLegend prop is set to
true, it will instead output a
<legend> element. Use this within a
There is a named slot in the Label component,
description, for including more information about the field. It's important to note that, when
isLegend is true, the description will be rendered inside the
<legend> element to ensure it will be read by assistive technology.
Below are examples of a label and a legend with an associated description.
Enter your preferred name
|Icon before the label text.|
Do not use this if including a start icon within the input component.
|Text to indicate that the field is optional.|
For example, this might be '(optional)' in English. This text will be placed next to the label text.
|Whether the label should be visually hidden.|
|Whether this component should output a |
Always set this to true when this component is used inside a
|The ID of the input/control this label is for.|
Will be added as the
|The ID of the description element.|
This ID can be used for the
|Whether this label is for a disabled field or input.|
|description||Short description text.|
Examples are shown with inputs to demonstrate the ARIA attributes required to connect the label and input.
<label> element for a single input.
Short description text
<form>, use a
<legend> element within a
<fieldset> for input groups.
When outputting a
<legend> rather than a
<label>, the markup of this component is quite different:
- There is no wrapper
<legend>must be a direct child of
- The description is included inside the
aria-describedbyattributes are not needed
To add an icon to the label:
- Add an empty
<span>before the label text with the classes
.cdx-label__label__iconand a custom class that you can target to add the CSS-only icon
- Apply the CSS-only icon mixin to that
This works for
Enter your signature using plain text or wikitext
Occasionally, there may be a use case for the label to be visually hidden. In these cases, it should still be present in the DOM with appropriate elements and ARIA attributes.
To visually hide the label, add the
.cdx-label--visually-hidden class to the outer element. This works for
.cdx-label--disabled class to the outer element to get disabled styles. This works for