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.

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:

NameTypeDefaultDescription
children*ReactNodeContent/text for the label.
as
'label' |'legend' |'div' |'span' 
"label" HTML tag to render the label as.
classNamestringAdditional CSS classes.
htmlForstringUse to associate with a form-element's id.
idstringundefined Id for the label.
labelHiddenbooleanfalse Visually hides the label.
ref
Ref<HTMLLabelElement |HTMLLegendElement |HTMLDivElement |HTMLSpanElement> 
Ref for the wrapping element.

You can override the styles of the Label component by setting a custom theme on the Configuration component.

{
      •       color: 'base.palette.foreground-color', // → base.palette.foreground-color
      •       'font-size': 'xs',
      •       'font-weight': 'base.font-weight.semi-bold' // → base.font-weight.semi-bold
      •     }
    •   }
}