# Label: Required and optional

> `indicator="optional"` tags controls without `required`, and `indicator="required"` adds an asterisk to controls with it. The mark is hidden from screen readers, which already announce required fields.

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

## Add this example

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

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

## Source

```tsx title="components/examples/label/indicator.tsx"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function LabelIndicator() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-indicator-name" indicator="optional">
          Full name
        </Label>
        <Input id="label-indicator-name" autoComplete="name" required />
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-indicator-company" indicator="optional">
          Company
        </Label>
        <Input id="label-indicator-company" autoComplete="organization" />
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-indicator-card" indicator="required">
          Card number
        </Label>
        <Input id="label-indicator-card" inputMode="numeric" required />
      </div>
    </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. |
| `indicator` | `"required" \| "optional"` | – | Mark the label from the control's required state. Off by default. |

## More Label examples

- [Follows its control](https://hextaui.com/docs/label/examples/states.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)