Back to Tamagui

Label

code/tamagui.dev/data/docs/components/label/1.0.0.mdx

1.144.41.2 KB
Original Source
<HeroContainer> <LabelDemo /> </HeroContainer>
tsx

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

bash
npm install @tamagui/label

Usage

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

API Reference

Label

Labels extend Stack views inheriting all the Tamagui standard props, plus:

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