CodexLabel
Describes the information requested by a given form field.
TIP
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.
Demos
Configurable
| Name | Value |
|---|---|
| Props | |
icon | |
optionalFlag | |
visuallyHidden | |
isLegend | |
disabled | |
| Slots | |
default | |
description | |
| View | |
Reading direction | |
Note: For icon properties, the relevant icon also needs to be imported from the @wikimedia/codex-icons package. See the usage documentation for more information. | |
Basic usage
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).
Visually-hidden label
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.
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 <fieldset> element.
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.
Usage
Props
| Prop name | Description | Type | Default |
|---|---|---|---|
icon | Icon before the label text. Do not use this if including a start icon within the input component. | Icon|null | null |
optionalFlag | 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. | string | '' |
visuallyHidden | Whether the label should be visually hidden. | boolean | false |
isLegend | Whether this component should output a <legend> element.Always set this to true when this component is used inside a <fieldset> element. Do not set it to true otherwise. | boolean | false |
inputId | The ID of the input/control this label is for. Will be added as the for attribute of the <label>. Not needed for <legend>. | string | '' |
descriptionId | The ID of the description element. This ID can be used for the aria-describedby attribute of the input. | string | '' |
disabled | Whether this label is for a disabled field or input. | boolean | false |
Slots
| Name | Description | Bindings |
|---|---|---|
| default | Label text. | |
| description | Short description text. |