| Name | Description | Default | Type |
|---|---|---|---|
children* | Content/text for the label. | | ReactNode |
as | HTML tag to render the label as. | "label" | 'div' |'label' |'legend' |'span' |
className | Additional CSS classes. | | string |
htmlFor | Use to associate with a form-element's id. | | string |
id | Id for the label. | undefined | string |
labelHidden | Visually hides the label. | false | boolean |
ref | Ref for the wrapping element. | | Ref<HTMLDivElement |HTMLLabelElement |HTMLLegendElement |HTMLSpanElement> |
Label
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
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.
To learn more about configuration, visit Pega Community.
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:
Example
Related components
Properties
Custom theming
You can override the styles of the Label component by setting a custom theme on the Configuration component.
Example
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}}}