| Name | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | | Content/text for the label. |
as | 'label' |'legend' |'div' |'span' | "label"
| HTML tag to render the label as. |
className | string | | Additional CSS classes. |
htmlFor | string | | Use to associate with a form-element's id. |
id | string | undefined
| Id for the label. |
labelHidden | boolean | false
| Visually hides the label. |
ref | Ref<HTMLLabelElement |HTMLLegendElement |HTMLDivElement |HTMLSpanElement> | | Ref for the wrapping element. |
Label
Labels identify Form elements on a page. In addition to basic information display, Labels are critical for accessibility reasons: users who use screen readers rely on labels to identify an element that has no defining attributes of its own. Labels go a long way to ensure that your application is accessible for all users.
For more information on how to use the features and props for this component, check out the developer documentation.
Usage
Labels must be provided for every Form input regardless of whether they are visible or not. Labels should be visible whenever possible to help users with cognitive challenges or users of speech-to-input software easily identify and navigate the application. If for any reason you need to visually hide a Label, you should use the labelHidden prop. This will ensure the Label is still read by screen readers.
In this example, the Label component is used to identify an Input in a Form:
Related components
Properties
Custom theming
You can override the styles of the Label component by setting a custom theme on the Configuration component.
Theme properties
{
color:'base.palette.foreground-color',// → base.palette.foreground-color'font-size':'xs','font-weight':'base.font-weight.semi-bold'// → base.font-weight.semi-bold}}}