#通用属性

本页是各组件页的公共前提，说明所有组件共有的属性规则与写入位置。组件特有的属性见对应组件页。

#属性透传

组件把本库未声明的属性原样透传到渲染出的根元素，className、id、style、data-*、aria-*、onClick 等可以直接写：

import { Button } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <Button onClick={() => console.log("clicked")} data-role="demo">点我</Button>
      <Button className="my-button" style={{ fontSize: 20 }}>
        自定义类与样式
      </Button>
    </div>
  );
}

export default App;

• 如果组件本身会往根元素固定写入同名属性，透传会失效，例如绝大多数组件的 aria-disabled 由 disabled 参数计算，手动指定无效。
• 原生 defaultValue / defaultChecked 不随透传写入 DOM。

#ref 与内部元素

ref 指向根元素。要拿到内部元素或往内部元素传入属性，走组件提供的通道：

#通用属性

含标签的组件（Button、TextInput 等）另有 label（标签文本）与 invisibleLabel（视觉隐藏但保留可访问名称），语义见下方说明。

几点说明：

• disabled 输出 aria-disabled 而非原生 disabled：禁用后元素仍可被聚焦与朗读，原生 disabled 只写在真实的表单控件上。
• 部分布局容器的 disabled 另有语义：
  • FieldLayout 只作用于字段本身；FieldsetLayout 走原生 <fieldset disabled>，会连带禁用整组内的控件；
  • 纯布局容器（PanelLayout、StackLayout 等）没有 disabled。
• title 与 accessKey 的写入位置因组件而异：多数写在根元素上，Button 系写在内部锚点，输入框系写在内部 <input> 上。要给 title 配 aria-* 时先看组件页的写入位置说明。
• title 的标签兜底随标签变化重算：标签视觉隐藏且未显式给 title 时以标签文本兜底；本工程每次渲染按当前 label / invisibleLabel 重算该兜底，后续改标签会联动更新。
• label 接受任意可渲染的 ReactNode：0 等可渲染节点按有标签处理，布尔值按无标签处理。
• tabIndex={null} 会移除 tabindex 属性：元素完全不可聚焦，编程聚焦也不生效——区别于 -1 的不进 Tab 序但仍可编程聚焦。
• flags 不是每个组件都有：各组件按其形态接受不同的标志（如 Button 的 primary / progressive、Icon 的色彩变体），具体见组件页。

#键盘与无障碍

键盘操作、焦点管理与 aria 属性与原版 OOUI 一致，具体按键见各组件页。