2.1.5 • Published 5 years ago
@thumbtack/tp-ui-react-label v2.1.5
package: '@thumbtack/tp-ui-react-label' kit: element/label.yaml platform: react
url: /api/components/element/label/react/
import '@thumbtack/thumbprint-atomic';
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
<React.Fragment>
<Label for="example-49293">Email address</Label>
<Input 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.
<React.Fragment>
<Label for="example-201998" isDisabled>
Email address
</Label>
<Input 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.
<React.Fragment>
<Label for="example-083109" hasError>
Email address
</Label>
<Input id="example-083109" hasError value="example@exampl" onChange={() => {}} />
<div className="mb1">
<FormNote hasError>The email address you entered is incorrect.</FormNote>
</div>
</React.Fragment>