GitHub
Copy-pasteStyled

Label

Label form elements with accessibility

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

Features

  • Nested and custom control support

  • Inline sizing and styling

  • Web accessibility with aria-labelledby

Installation

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

yarn add @tamagui/label

Usage

// copy-paste: these skins import from files you own. copy each registry item

// below into your app, then adjust the relative import paths to fit.

//   components/tamagui/Label.tsx (registry item "label")

// npm dependencies: @tamagui/core @tamagui/label

import { Label } from "../components/tamagui/Label";

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 && <html.span id="email-error">Please enter a valid email</html.span>}

With description

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

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.

    Source

    v2-look Label: theme text color + press color feedback, over the unstyled @tamagui/ui Label behavior (label element, flex alignment, selection/cursor resets, the size-derived font mechanism, and the htmlFor/aria wiring). This is the exact source the registry ships — copy it into your app and the examples above import from your copy.

    components/tamagui/Label.tsx
    // Styled Label = the unstyled @tamagui/ui Label behavior (label element, flex
// alignment, selection/cursor resets, the size-derived font mechanism, and the
// htmlFor/aria wiring) + the default v2-look skin (theme text color + the press
// color feedback). Single skin definition; the shadcn registry item is generated
// from this file.
import { type GetProps, styled } from '@tamagui/core'
import { Label as UiLabel } from '@tamagui/label'

export const Label = styled(UiLabel, {
  displayName: 'Label',
  color: 'color press:color-press',
})

export type LabelProps = GetProps<typeof Label> & {
  htmlFor?: string
}

    Dependencies

    yarn add @tamagui/core @tamagui/label

    Expects theme tokens: color, color-press.

    Need raw behavior without any skin? tamagui/unstyled re-exports the @tamagui/ui primitives (advanced).

    Previous

    Input & TextArea

    Next

    Progress

    Edit this page on GitHub.