Label

<Highlights features={[ Supports nested controls and custom controls., Sizable and styleable inline., Works on web with aria-labelledby., ]} />

Installation

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

npm install @tamagui/label

Usage

import { Label } from 'tamagui'

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

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.

Required Fields

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

Invalid State

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

With Description

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

API Reference

Label

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

<PropsTable data={[ { name: 'htmlFor', type: 'string', required: true, description: Matches the \id` of a form element to associate with., }, { name: 'unstyled', required: false, type: boolean, description: Removes all default Tamagui styles.`, }, ]} />

Accessibility Props

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

<PropsTable data={[ { name: 'aria-required', type: 'boolean', description: Indicates user input is required before form submission., }, { name: 'aria-invalid', type: 'boolean', description: Indicates the associated field has a validation error., }, { name: 'aria-disabled', type: 'boolean', description: Indicates the associated control is disabled., }, { name: 'aria-describedby', type: 'string', description: References an element providing additional description such as hint text or error messages., }, { name: 'aria-labelledby', type: 'string', description: References another element that labels this one. \Label` sets this automatically on the target input., }, { name: 'aria-details', type: 'string', description: References an element providing extended description or instructions.`, }, ]} />