Label Text

A typography component to render a label.

UsagePermalink to: Usage

Label Text is a typography that is used to display labels on a page, usually - but not limited to - form labels.

It will render as a <label> element as default, but should be changed to any other element or React component with the as prop if used outside of a form.

When to usePermalink to: When to use

Use it to indicate a label for something, eg. a form element

When not to usePermalink to: When not to use

Do not use it for headings
Do not use it for bodies of text

AccessibilityPermalink to: Accessibility

When using the Label Text with a form element, use the htmlFor="form_element_id". This will make sure that the form element is focused when the Label Text is clicked, and that it will have a accessible name for assistive technologies:

<LabelText htmlFor="first_name">First name</LabelText>
<input type="text" id="first_name" />

For any other use case outside a form, the for attribute should not be used. Instead render as a regular text element, eg. a <p> or <span>:

<LabelText as="span">A label</LabelText>
<BodyText>A description</BodyText>

ExamplesPermalink to: Examples

Text alignmentPermalink to: Text alignment

Text will inherit text alignment from their parent, but can be overwritten with the textAlign prop.

Label aligned to startLabel aligned centerLabel aligned to end

Open

import { LabelText } from "@peakon/bedrock/react/typography";

<LabelText textAlign="start">Label aligned to start</LabelText>
<LabelText textAlign="center">Label aligned center</LabelText>
<LabelText textAlign="end">Label aligned to end</LabelText>

As another elementPermalink to: As another element

Label rendered as a HTML Span Element