Label

Import

import { Label } from '@tac-ui/web';

Playground

Interactively configure the Label props below.

<Label>
  Email address
</Label>

Default

A basic label with no additional modifiers. Renders as a styled HTML label element with medium font weight.

<Label>Email address</Label>

Required

Set the required prop to append a red asterisk after the label text. The asterisk is hidden from assistive technology via aria-hidden.

<Label required>Password</Label>
<Label required>Username</Label>

Optional

Set showOptional to append a muted "(optional)" suffix, signalling to users that the field is not mandatory.

<Label showOptional>Bio</Label>
<Label showOptional>Website</Label>

With Tooltip

Pass any React node to the tooltip prop to display an info icon next to the label. Hovering or focusing the icon reveals the tooltip.

<Label tooltip="We'll never share your email with anyone else.">
  Email address
</Label>
<Label required tooltip="Must be at least 8 characters and contain a number.">
  Password
</Label>

With Input

Pair Label with an Input by passing a matching htmlFor and id. The label click focuses the input field.

<div className="flex flex-col gap-1.5">
  <Label htmlFor="email" required>
    Email address
  </Label>
  <Input id="email" type="email" placeholder="[email protected]" />
</div>

<div className="flex flex-col gap-1.5">
  <Label htmlFor="bio" showOptional>
    Bio
  </Label>
  <Input id="bio" placeholder="Tell us about yourself" />
</div>

API Reference

Label props: