Components

Label(React)

Form labels commonly used with inputs.

Version:	`14.18.2` •View source•Changelog•Report issue
Install:	`yarn add @thumbtack/thumbprint-react`
Import:	`import { Label } from '@thumbtack/thumbprint-react';`

Examples

The Label React component uses the for prop to associate itself with a form field.

The for and id props must match and be unique to the page. You can use Lodash’s uniqueId to generate a unique id.

Label with an input

Email address

<React.Fragment>
    <Label for="example-49293">Email address</Label>
    <TextInput id="example-49293" onChange={() => {}} placeholder="example@example.com" />
</React.Fragment>

<React.Fragment>
    <Label for="example-49293">Email address</Label>
    <TextInput id="example-49293" onChange={() => {}} placeholder="example@example.com" />
</React.Fragment>

Disabled label

Labels can appear visually disabled. It’s important to also disable the associated form element.

Email address

<React.Fragment>
    <Label for="example-201998" isDisabled>
        Email address
    </Label>
    <TextInput
        id="example-201998"
        isDisabled
        onChange={() => {}}
        placeholder="example@example.com"
    />
</React.Fragment>

<React.Fragment>
    <Label for="example-201998" isDisabled>
        Email address
    </Label>
    <TextInput
        id="example-201998"
        isDisabled
        onChange={() => {}}
        placeholder="example@example.com"
    />
</React.Fragment>

Label with a validation error

You can change the label color to red when the associated form element has invalid data.

Validation errors must be also include text that explains the error. This helps guide the user and is crucial for users with visual impairments.

Email address

The email address you entered is incorrect.

<React.Fragment>
    <Label for="example-083109" hasError>
        Email address
    </Label>
    <TextInput id="example-083109" hasError value="example@exampl" onChange={() => {}} />
    <div className="mb1">
        <FormNote hasError>The email address you entered is incorrect.</FormNote>
    </div>
</React.Fragment>

<React.Fragment>
    <Label for="example-083109" hasError>
        Email address
    </Label>
    <TextInput id="example-083109" hasError value="example@exampl" onChange={() => {}} />
    <div className="mb1">
        <FormNote hasError>The email address you entered is incorrect.</FormNote>
    </div>
</React.Fragment>

Props

Label

children
The label text that appears above the form element.
Type
React.ReactNode
Default
null
for
id of the form field that’s associated with the label. Clicking on the label text will switch the browser’s focus to the form field.
The Label’s for and form field’s id prop must match and be unique to the page. You can use Lodash’s uniqueId to generate a unique id.
Type
string
isDisabled
Visually disable the label.
Type
boolean
Default
false
hasError
Changes the label text color to red.
Type
boolean
Default
false
dataTestId
A selector to hook into the React component for use in automated testing environments.
Type
string
dataTest
deprecated
A selector to hook into the React component for use in automated testing environments.
Note: Deprecated in favor of the `dataTestId` prop
Type
string