#Label

Source | Original component

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 wires this automatically; no hand wiring needed.

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.

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.

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

#See also

• Label layout and association for form fields: FieldLayout
• Inline labels built into input components: the "Label" section of TextInput