Label

Label associates text with form controls and preserves that relationship for assistive technology.

Installation

Label is already installed in tamagui, or you can install it independently:

yarn
npm
bun
pnpm
Copy
yarn add @tamagui/label

Usage

import { Label } from 'tamagui'

export default () => (
  <>
    <Label htmlFor="name">Name</Label>
    <Input id="name" defaultValue="Nate Wienert" />
  </>
)
Copy

Accessibility

Use with Input or other form elements to automatically get correct labelling by id and aria-labelledby. You can also use the provided useLabelContext hook to build your own controls.

Label supports all standard ARIA attributes for form accessibility. These work on both web and React Native. See the React Native Accessibility docs for native behavior.

<Label htmlFor="email" aria-required>
  Email
</Label>
<Input id="email" aria-required />
Copy

<Label htmlFor="email" aria-invalid={hasError}>
  Email
</Label>
<Input id="email" aria-invalid={hasError} aria-errormessage="email-error" />
{hasError && <html.span id="email-error">Please enter a valid email</html.span>}
Copy

<Label htmlFor="password" aria-describedby="password-hint">
  Password
</Label>
<Input id="password" aria-describedby="password-hint" />
<html.span id="password-hint">Must be at least 8 characters</html.span>
Copy

API reference

Labels extend SizableText inheriting all the Tamagui standard props, plus:

Label passes through all ARIA attributes. These are the most commonly used for form labeling:

These props work cross-platform. On web they render as standard ARIA attributes. On React Native they map to the native accessibility system. See the React Native Accessibility docs for details.