#Common props

This page is the shared premise for every component page; it covers the prop rules and where they land 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 don't reach the DOM through 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

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 land varies by component: on most they land on the root element, on the Button family on the inner anchor, and on the input family on the inner <input>. Before pairing title with an aria-* attribute, check the landing spot 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 (the original evaluates it only once at construction, leaving title untouched by later label changes).
• label accepts any renderable ReactNode: renderable nodes such as 0 count as having a label, while booleans count as having none (the original only accepts non-empty strings).
• tabIndex={null} removes the tabindex attribute entirely: the element becomes completely unfocusable, programmatic focus included — 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 are implemented one by one against the original OOUI; the specific keys are documented on each component page.