GitHub

Label

Label form elements with accessibility

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:

yarn add @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:

Props

  • htmlFor (required)

    string

    Matches the `id` of a form element to associate with.

  • unstyled

    boolean

    Removes all default Tamagui styles.

    • Accessibility Props

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

    Props

  • aria-required

    boolean

    Indicates user input is required before form submission.

  • aria-invalid

    boolean

    Indicates the associated field has a validation error.

  • aria-disabled

    boolean

    Indicates the associated control is disabled.

  • aria-describedby

    string

    References an element providing additional description such as hint text or error messages.

  • aria-labelledby

    string

    References another element that labels this one. `Label` sets this automatically on the target input.

  • aria-details

    string

    References an element providing extended description or instructions.

    • 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.

    Previous

    Input & TextArea

    Next

    Progress

    Edit this page on GitHub.