# Label: Follows its control

> The label dims and shows a not-allowed cursor while its control is disabled, and exposes `data-required`, `data-invalid` and `data-readonly` for your own styles. It keeps up when the control changes.

Example: https://hextaui.com/docs/label/examples/states
Component docs: https://hextaui.com/docs/label.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/label-states.json
```

This adds `components/examples/label/states.tsx` with the Label component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/label/states.tsx"
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function LabelStates() {
  const [locked, setLocked] = React.useState(true)

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-states-domain">Custom domain</Label>
        <Input
          id="label-states-domain"
          defaultValue="docs.example.com"
          disabled={locked}
        />
      </div>
      <Button
        variant="outline"
        size="sm"
        className="self-start"
        onClick={() => setLocked(!locked)}
      >
        {locked ? "Unlock" : "Lock"}
      </Button>
    </div>
  )
}
```

## Props in this example

### Label

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `htmlFor` | `string` | – | The id of the control. Leave it out when the label wraps the control. |

## More Label examples

- [Required and optional](https://hextaui.com/docs/label/examples/indicator.md)
- [Checkbox](https://hextaui.com/docs/label/examples/checkbox.md)
- [Icon](https://hextaui.com/docs/label/examples/icon.md)
- [Long content](https://hextaui.com/docs/label/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/label/examples/rtl.md)