#Common props

This page is the shared premise for every component page; it covers the prop rules and where props are written that all components have in common. Component-specific props are documented on each component's own page.

#Prop pass-through

Components forward any prop this library does not declare straight onto the rendered root element, so className, id, style, data-*, aria-*, onClick and the like can be written directly:

import { Button } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <Button onClick={() => console.log("clicked")} data-role="demo">Click me</Button>
      <Button className="my-button" style={{ fontSize: 20 }}>
        Custom class and style
      </Button>
    </div>
  );
}

export default App;

• If a component always writes a given prop onto the root element itself, pass-through won't take effect — for example, aria-disabled on most components is derived from the disabled prop and can't be set by hand.
• The native defaultValue / defaultChecked are not written to the DOM by pass-through.

#Refs and inner elements

ref points at the root element. To reach an inner element or pass props to it, use the channel the component exposes:

#Common props

Components with a label (Button, TextInput, etc.) also have label (the label text) and invisibleLabel (hidden visually but kept as the accessible name); the semantics are covered in the notes below.

A few notes:

• disabled emits aria-disabled, not the native disabled: a disabled element can still be focused and read out; the native disabled is only set on real form controls.
• disabled means something different on some layout containers: on FieldLayout it applies to the field itself; FieldsetLayout uses a native <fieldset disabled>, which also disables every control in the group; pure layout containers (PanelLayout, StackLayout, etc.) have no disabled.
• Where title and accessKey are written varies by component: on most components they are written to the root element, in the Button family to the inner anchor, and in the input family to the inner <input>. Before pairing title with an aria-* attribute, check the placement notes on the component page.
• The title label fallback follows later label changes: when the label is visually hidden and title is not given, the label text is used as the fallback; this library recomputes that fallback from the current label / invisibleLabel on every render, so changing the label later updates title too.
• label accepts any renderable ReactNode: renderable nodes such as 0 count as having a label, while booleans count as having none.
• tabIndex={null} removes the tabindex attribute: the element becomes completely unfocusable, and programmatic focus does not work either — unlike -1, which stays out of the Tab order but remains programmatically focusable.
• Not every component has flags: each accepts different flags depending on its form (e.g. Button's primary / progressive, Icon's color variants); see the component pages.

#Keyboard and accessibility

Keyboard interaction, focus management and aria attributes match the original OOUI; the specific keys are documented on each component page.