# Source: https://tamagui.dev/ui/label.md

---
title: Label
description: Label form elements with accessibility.
name: label
component: Label
package: label
demoName: Label
---

<HeroContainer>
  <LabelDemo />
</HeroContainer>

```tsx hero template=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:

```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](/docs/intro/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.`,
    },
  ]}
/>