> For AI agents: the complete documentation index is available at /ooui-react/en/llms.txt, the full documentation bundle is available at /ooui-react/en/llms-full.txt.

# Label

> [Source](https://github.com/BearBin1215/ooui-react/tree/main/src/widgets/Label) | [Original component](https://doc.wikimedia.org/oojs-ui/master/js/OO.ui.LabelWidget.html "OO.ui.LabelWidget")

A standalone form label, for when you need to place a label on its own.

## Associating a form control

Clicking the label to focus/activate the control relies on the native `<label>`
's `htmlFor`
 association. The channel depends on the component — an `id`
 landed on the wrong element fails silently: 
- **TextInput family** (including MultilineTextInput, NumberInput, ComboBoxInput, etc.): `id` lands on the root div; to reach the native input, pass it through `inputProps={{ id }}`.
- **CheckboxInput / RadioInput**: there is no `inputProps` channel — use the dedicated `inputId` prop, which lands directly on the native `<input>`.

Inside a form, [FieldLayout](/ooui-react/en/components/field-layout/index.md) wires this automatically; no hand wiring needed.

:::note Prefer FieldLayout in forms
In a form, the layout, alignment and click-to-focus linkage of "label + control" are usually handled by [FieldLayout](/ooui-react/en/components/field-layout/index.md); writing `htmlFor`/`id` by hand suits free-form composition.
:::

```tsx preview
import { CheckboxInput, Label, TextInput } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 320 }}>
      <Label htmlFor="label-demo-username">Username</Label>
      <TextInput inputProps={{ id: "label-demo-username" }} placeholder="Click the label above to focus this input" />
      <Label htmlFor="label-demo-agree">Agree to the terms</Label>
      <CheckboxInput inputId="label-demo-agree" />
    </div>
  );
}

export default App;
```

## Visual hiding and title

`invisibleLabel` hides the label content visually (clipped, not removed — screen readers still announce it). `title` falls back to the label text when not given explicitly.

```tsx preview
import { Label } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
      <Label>Regular label</Label>
      <Label invisibleLabel>Screen-reader-only label</Label>
    </div>
  );
}

export default App;
```

## Disabled state

`disabled` outputs `oo-ui-widget-disabled` and `aria-disabled`; the theme dims the label.

```tsx preview
import { Label } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
      <Label>Regular label</Label>
      <Label disabled>Disabled label</Label>
    </div>
  );
}

export default App;
```

## Structure

The component renders a single `<label>`; the `ref` points to it, and undeclared props (`htmlFor`, `title`, events, etc.) pass straight through to that element.

## API

| Prop             | Description                                                                                      | Type                               | Default |
| ---------------- | ------------------------------------------------------------------------------------------------ | ---------------------------------- | ------- |
| `children`       | Label content                                                                                    | `ReactNode`                        | —       |
| `invisibleLabel` | Hide the label visually (kept as accessible name)                                                | `boolean`                          | `false` |
| `disabled`       | Whether disabled                                                                                 | `boolean`                          | `false` |
| `...rest`        | Native `label` props (`htmlFor`, `title`, `className`, events, etc.) passed straight to the root | `HTMLAttributes<HTMLLabelElement>` | —       |

## See also

- Label layout and association for form fields: [FieldLayout](/ooui-react/en/components/field-layout/index.md)
- Inline labels built into input components: the "Label" section of [TextInput](/ooui-react/en/components/text-input/index.md)