From d981e00db8cecebcce43fbdf593e50a6251245fd Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Sat, 24 Dec 2022 00:31:41 +0000
Subject: [PATCH] [Beta] react-dom: Components (#5383)

* <input>

* Fix typo

* tweak

* separate props

* reword

* typos

* compress

* tweaks

* Add more

* more

* shorter

* twk

* more readable

* fix

* oops

* oops

* <textarea>

* <progress>

* <select>, <progress>

* upd

* <option>

* wip common

* wip

* more

* Fix onSelect desc

* index

* stub events

* events

* twk

* all events
---
 beta/src/components/Breadcrumbs.tsx           |    2 +-
 beta/src/components/MDX/ConsoleBlock.tsx      |    3 +-
 beta/src/components/MDX/Sandpack/Console.tsx  |    3 +
 .../components/MDX/Sandpack/SandpackRoot.tsx  |    2 +-
 .../apis/react-dom/components/common.md       | 1180 +++++++++++++++++
 .../apis/react-dom/components/index.md        |  263 ++++
 .../apis/react-dom/components/input.md        |  595 +++++++++
 .../apis/react-dom/components/option.md       |   80 ++
 .../apis/react-dom/components/progress.md     |   70 +
 .../apis/react-dom/components/select.md       |  385 ++++++
 .../apis/react-dom/components/textarea.md     |  423 ++++++
 .../learn/manipulating-the-dom-with-refs.md   |    4 +-
 beta/src/sidebarAPIs.json                     |   33 +-
 13 files changed, 3037 insertions(+), 6 deletions(-)
 create mode 100644 beta/src/content/apis/react-dom/components/common.md
 create mode 100644 beta/src/content/apis/react-dom/components/index.md
 create mode 100644 beta/src/content/apis/react-dom/components/input.md
 create mode 100644 beta/src/content/apis/react-dom/components/option.md
 create mode 100644 beta/src/content/apis/react-dom/components/progress.md
 create mode 100644 beta/src/content/apis/react-dom/components/select.md
 create mode 100644 beta/src/content/apis/react-dom/components/textarea.md

diff --git a/beta/src/components/Breadcrumbs.tsx b/beta/src/components/Breadcrumbs.tsx
index beed182a4..9bd630b12 100644
--- a/beta/src/components/Breadcrumbs.tsx
+++ b/beta/src/components/Breadcrumbs.tsx
@@ -10,7 +10,7 @@ function Breadcrumbs() {
   const {breadcrumbs} = useRouteMeta();
   if (!breadcrumbs) return null;
   return (
-    <div className="flex">
+    <div className="flex flex-wrap">
       {breadcrumbs.map(
         (crumb, i) =>
           crumb.path && (
diff --git a/beta/src/components/MDX/ConsoleBlock.tsx b/beta/src/components/MDX/ConsoleBlock.tsx
index a5e68cead..2ec393f03 100644
--- a/beta/src/components/MDX/ConsoleBlock.tsx
+++ b/beta/src/components/MDX/ConsoleBlock.tsx
@@ -58,7 +58,8 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
         className={cn(
           'flex px-4 pt-4 pb-6 items-center content-center font-mono text-code rounded-b-md',
           {
-            'bg-red-30 text-red-40 bg-opacity-10': level === 'error',
+            'bg-red-30 text-red-50 dark:text-red-30 bg-opacity-5':
+              level === 'error',
             'bg-yellow-5 text-yellow-50': level === 'warning',
             'bg-gray-5 text-secondary dark:text-secondary-dark':
               level === 'info',
diff --git a/beta/src/components/MDX/Sandpack/Console.tsx b/beta/src/components/MDX/Sandpack/Console.tsx
index 375a92f0b..23194c870 100644
--- a/beta/src/components/MDX/Sandpack/Console.tsx
+++ b/beta/src/components/MDX/Sandpack/Console.tsx
@@ -109,6 +109,9 @@ export const SandpackConsole = ({visible}: {visible: boolean}) => {
         setLogs((prev) => {
           const newLogs = message.log
             .filter((consoleData) => {
+              if (!consoleData.method) {
+                return false;
+              }
               if (
                 typeof consoleData.data[0] === 'string' &&
                 consoleData.data[0].indexOf('The above error occurred') !== -1
diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
index cb5d50963..4b3f41527 100644
--- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -74,7 +74,7 @@ function SandpackRoot(props: SandpackProps) {
 
   files['/styles.css'] = {
     code: [sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'),
-    hidden: true,
+    hidden: !files['/styles.css']?.visible,
   };
 
   return (
diff --git a/beta/src/content/apis/react-dom/components/common.md b/beta/src/content/apis/react-dom/components/common.md
new file mode 100644
index 000000000..15311754c
--- /dev/null
+++ b/beta/src/content/apis/react-dom/components/common.md
@@ -0,0 +1,1180 @@
+---
+title: "Common components (e.g. <div>)"
+---
+
+<Intro>
+
+All built-in browser components, such as [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div), support some common props and events.
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Usage {/*usage*/}
+
+### Applying CSS styles {/*applying-css-styles*/}
+
+In React, you specify a CSS class with [`className`.](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) It works like the `class` attribute in HTML:
+
+```js
+<img className="avatar" />
+```
+
+Then you write the CSS rules for it in a separate CSS file:
+
+```css
+/* In your CSS */
+.avatar {
+  border-radius: 50%;
+}
+```
+
+React does not prescribe how you add CSS files. In the simplest case, you'll add a [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project.
+
+Sometimes, the style values depend on data. Use the `style` attribute to pass some styles dynamically:
+
+```js {3-6}
+<img
+  className="avatar"
+  style={{
+    width: user.imageSize,
+    height: user.imageSize
+  }}
+/>
+```
+
+
+In the above example, `style={{}}` is not a special syntax, but a regular `{}` object inside the `style={ }` [JSX curly braces.](/learn/javascript-in-jsx-with-curly-braces) We recommend to only use the `style` attribute when your styles depend on JavaScript variables.
+
+<Sandpack>
+
+```js App.js
+import Avatar from './Avatar.js';
+
+const user = {
+  name: 'Hedy Lamarr',
+  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
+  imageSize: 90,
+};
+
+export default function App() {
+  return <Avatar user={user} />;
+}
+```
+
+```js Avatar.js active
+export default function Avatar({ user }) {
+  return (
+    <img
+      src={user.imageUrl}
+      alt={'Photo of ' + user.name}
+      className="avatar"
+      style={{
+        width: user.imageSize,
+        height: user.imageSize
+      }}
+    />
+  );
+}
+```
+
+```css styles.css
+.avatar {
+  border-radius: 50%;
+}
+```
+
+</Sandpack>
+
+<DeepDive>
+
+#### How to apply multiple CSS classes conditionally? {/*how-to-apply-multiple-css-classes-conditionally*/}
+
+To apply CSS classes conditionally, you need to produce the `className` string yourself using JavaScript.
+
+For example, `className={'row ' + (isSelected ? 'selected': '')}` will produce either `className="row"` or `className="row selected"` depending on whether `isSelected` is `true`.
+
+To make this more readable, you can use a tiny helper library like [`classnames`:](https://github.com/JedWatson/classnames)
+
+```js
+import cn from 'classnames';
+
+function Row({ isSelected }) {
+  return (
+    <div className={cn('row', isSelected && 'selected')}>
+      ...
+    </div>
+  );
+}
+```
+
+It is especially convenient if you have multiple conditional classes:
+
+```js
+import cn from 'classnames';
+
+function Row({ isSelected, size }) {
+  return (
+    <div className={cn('row', {
+      selected: isSelected,
+      large: size === 'large',
+      small: size === 'small',
+    })}>
+      ...
+    </div>
+  );
+}
+```
+
+</DeepDive>
+
+---
+
+### Manipulating a DOM node with a ref {/*manipulating-a-dom-node-with-a-ref*/}
+
+Sometimes, you'll need to get the browser DOM node associated with a tag in JSX. For example, if you want to focus an `<input>` when a button is clicked, you need to call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on the browser `<input>` DOM node.
+
+To obtain the browser DOM node for a tag, [declare a ref](/apis/react/useRef) and pass it as the `ref` attribute to that tag:
+
+```js {7}
+import { useRef } from 'react';
+
+export default function Form() {
+  const inputRef = useRef(null);
+  // ...
+  return (
+    <input ref={inputRef} />
+    // ...
+```
+
+React will put the DOM node into `inputRef.current` after it's been rendered to the screen.
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+
+export default function Form() {
+  const inputRef = useRef(null);
+
+  function handleClick() {
+    inputRef.current.focus();
+  }
+
+  return (
+    <>
+      <input ref={inputRef} />
+      <button onClick={handleClick}>
+        Focus the input
+      </button>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+Read more about [manipulating DOM with refs](/learn/manipulating-the-dom-with-refs) and [check out more examples.](/apis/react/useRef#examples-dom)
+
+For more advanced use cases, the `ref` attribute also accepts a [callback function.](#ref-callback)
+
+---
+
+### Dangerously setting the inner HTML {/*dangerously-setting-the-inner-html*/}
+
+You can pass a raw HTML string to an element like so:
+
+```js
+const markup = { __html: '<p>some raw html</p>' };
+return <div dangerouslySetInnerHTML={markup} />;
+```
+
+**This is dangerous. As with the underlying DOM [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property, you must exercise extreme caution! Unless the markup is coming from a completely trusted source, it is trivial to introduce an [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerability this way.**
+
+For example, if you use a Markdown library that converts Markdown to HTML, you trust that its parser doesn't contain bugs, and the user only sees their own input, you can display the resulting HTML like this:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import MarkdownPreview from './MarkdownPreview.js';
+
+export default function MarkdownEditor() {
+  const [postContent, setPostContent] = useState('_Hello,_ **Markdown**!');
+  return (
+    <>
+      <label>
+        Enter some markdown:
+        <textarea
+          value={postContent}
+          onChange={e => setPostContent(e.target.value)}
+        />
+      </label>
+      <hr />
+      <MarkdownPreview markdown={postContent} />
+    </>
+  );
+}
+```
+
+```js MarkdownPreview.js active
+import { Remarkable } from 'remarkable';
+
+const md = new Remarkable();
+
+function renderMarkdownToHTML(markdown) {
+  // This is ONLY safe because the output HTML
+  // is shown to the same user, and because you
+  // trust this Markdown parser to not have bugs.
+  const renderedHTML = md.render(markdown);
+  return {__html: renderedHTML};
+}
+
+export default function MarkdownPreview({ markdown }) {
+  const markup = renderMarkdownToHTML(markdown);
+  return <div dangerouslySetInnerHTML={markup} />;
+}
+```
+
+```json package.json
+{
+  "dependencies": {
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "remarkable": "2.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```css
+textarea { display: block; margin-top: 5px; margin-bottom: 10px; }
+```
+
+</Sandpack>
+
+To see why rendering arbitrary HTML is dangerous, replace the code above with this:
+
+```js {1-4,7,8}
+const post = {
+  // Imagine this content is stored in the database.
+  content: `<img src="" onerror='alert("you were hacked")'>`
+};
+
+export default function MarkdownPreview() {
+  // 🔴 SECURITY HOLE: passing untrusted input to dangerouslySetInnerHTML
+  const markup = { __html: post.content };
+  return <div dangerouslySetInnerHTML={markup} />;
+}
+```
+
+The code embedded in the HTML will run. A hacker could use this security hole to steal user information or to perform actions on their behalf. **Only use `dangerouslySetInnerHTML` with trusted and sanitized data.**
+
+---
+
+### Handling mouse events {/*handling-mouse-events*/}
+
+This example shows some common [mouse events](#mouseevent-handler) and when they fire.
+
+<Sandpack>
+
+```js
+export default function MouseExample() {
+  return (
+    <div
+      onMouseEnter={e => console.log('onMouseEnter (parent)')}
+      onMouseLeave={e => console.log('onMouseLeave (parent)')}
+    >
+      <button
+        onClick={e => console.log('onClick (first button)')}
+        onMouseDown={e => console.log('onMouseDown (first button)')}
+        onMouseEnter={e => console.log('onMouseEnter (first button)')}
+        onMouseLeave={e => console.log('onMouseLeave (first button)')}
+        onMouseOver={e => console.log('onMouseOver (first button)')}
+        onMouseUp={e => console.log('onMouseUp (first button)')}
+      >
+        First button
+      </button>
+      <button
+        onClick={e => console.log('onClick (second button)')}
+        onMouseDown={e => console.log('onMouseDown (second button)')}
+        onMouseEnter={e => console.log('onMouseEnter (second button)')}
+        onMouseLeave={e => console.log('onMouseLeave (second button)')}
+        onMouseOver={e => console.log('onMouseOver (second button)')}
+        onMouseUp={e => console.log('onMouseUp (second button)')}
+      >
+        Second button
+      </button>
+    </div>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin-left: 10px; }
+```
+
+</Sandpack>
+
+---
+
+### Handling pointer events {/*handling-pointer-events*/}
+
+This example shows some common [pointer events](#pointerevent-handler) and when they fire.
+
+<Sandpack>
+
+```js
+export default function PointerExample() {
+  return (
+    <div
+      onPointerEnter={e => console.log('onPointerEnter (parent)')}
+      onPointerLeave={e => console.log('onPointerLeave (parent)')}
+      style={{ padding: 20, backgroundColor: '#ddd' }}
+    >
+      <div
+        onPointerDown={e => console.log('onPointerDown (first child)')}
+        onPointerEnter={e => console.log('onPointerEnter (first child)')}
+        onPointerLeave={e => console.log('onPointerLeave (first child)')}
+        onPointerMove={e => console.log('onPointerMove (first child)')}
+        onPointerUp={e => console.log('onPointerUp (first child)')}
+        style={{ padding: 20, backgroundColor: 'lightyellow' }}
+      >
+        First child
+      </div>
+      <div
+        onPointerDown={e => console.log('onPointerDown (second child)')}
+        onPointerEnter={e => console.log('onPointerEnter (second child)')}
+        onPointerLeave={e => console.log('onPointerLeave (second child)')}
+        onPointerMove={e => console.log('onPointerMove (second child)')}
+        onPointerUp={e => console.log('onPointerUp (second child)')}
+        style={{ padding: 20, backgroundColor: 'lightblue' }}
+      >
+        Second child
+      </div>
+    </div>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin-left: 10px; }
+```
+
+</Sandpack>
+
+---
+
+### Handling focus events {/*handling-focus-events*/}
+
+In React, [focus events](#focusevent-handler) bubble. You can use the `currentTarget` and `relatedTarget` to differentiate if the focusing or blurring events originated from outside of the parent element. The example shows how to detect focusing a child, focusing the parent element, and how to detect focus entering or leaving the whole subtree.
+
+<Sandpack>
+
+```js
+export default function FocusExample() {
+  return (
+    <div
+      tabIndex={1}
+      onFocus={(e) => {
+        if (e.currentTarget === e.target) {
+          console.log('focused parent');
+        } else {
+          console.log('focused child', e.target.name);
+        }
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+          // Not triggered when swapping focus between children
+          console.log('focus entered parent');
+        }
+      }}
+      onBlur={(e) => {
+        if (e.currentTarget === e.target) {
+          console.log('unfocused parent');
+        } else {
+          console.log('unfocused child', e.target.name);
+        }
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+          // Not triggered when swapping focus between children
+          console.log('focus left parent');
+        }
+      }}
+    >
+      <label>
+        First name:
+        <input name="firstName" />
+      </label>
+      <label>
+        Last name:
+        <input name="lastName" />
+      </label>
+    </div>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin-left: 10px; }
+```
+
+</Sandpack>
+
+---
+
+### Handling keyboard events {/*handling-keyboard-events*/}
+
+This example shows some common [keyboard events](#keyboardevent-handler) and when they fire.
+
+<Sandpack>
+
+```js
+export default function KeyboardExample() {
+  return (
+    <label>
+      First name:
+      <input
+        name="firstName"
+        onKeyDown={e => console.log('onKeyDown:', e.key, e.code)}
+        onKeyUp={e => console.log('onKeyUp:', e.key, e.code)}
+      />
+    </label>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin-left: 10px; }
+```
+
+</Sandpack>
+
+---
+
+## Reference {/*reference*/}
+
+### Common components (e.g. `<div>`) {/*common*/}
+
+#### Props {/*common-props*/}
+
+These special React props are supported for all built-in components:
+
+* `children`: A React node (an element, a string, a number, [a portal,](/apis/react-dom/createPortal) an empty node like `null`, `undefined` and booleans, or an array of other React nodes). Specifies the content inside the component. When you use JSX, you will usually specify the `children` prop implicitly by nesting tags like `<div><span /></div>`.
+
+* `dangerouslySetInnerHTML`: An object of the form `{ __html: '<p>some html</p>' }` with a raw HTML string inside. Overrides the [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property of the DOM node and displays the passed HTML inside. This should be used with extreme caution! If the HTML inside isn't trusted (for example, if it's based on user data), you risk introducing an [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerability. [Read more about using `dangerouslySetInnerHTML`.](#dangerously-setting-the-inner-html)
+
+* `ref`: A ref object from [`useRef`](/apis/react/useRef) or [`createRef`](/apis/react/createRef), or a [`ref` callback function,](#ref-callback) or a string for [legacy refs.](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) Your ref will be filled with the DOM element for this node. [Read more about manipulating the DOM with refs.](#manipulating-a-dom-node-with-a-ref)
+
+* `suppressContentEditableWarning`: A boolean. If `true`, suppresses the warning that React shows for elements that both have `children` and `contentEditable={true}` (which normally do not work together). Use this if you're building a text input library that manages the `contentEditable` content manually.
+
+* `suppressHydrationWarning`: A boolean. If you use [server rendering,](/apis/react-dom/server) normally there is a warning when the server and the client render different content. In some rare cases (like timestamps), it is very hard or impossible to guarantee an exact match. If you set `suppressHydrationWarning` to `true`, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don't overuse it. [Read more about suppressing hydration errors.](/apis/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors)
+
+* `style`: An object with CSS styles, for example `{ fontWeight: 'bold', margin: 20 }`. Similarly to the DOM [`style`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) property, the CSS property names need to be written as `camelCase`, for example `fontWeight` instead of `font-weight`. You can pass strings or numbers as values. If you pass a number, like `width: 100`, React will automatically append `px` ("pixels") to the value unless it's a [unitless property.](https://github.com/facebook/react/blob/81d4ee9ca5c405dce62f64e61506b8e155f38d8d/packages/react-dom-bindings/src/shared/CSSProperty.js#L8-L57) We recommend using `style` only for dynamic styles where you don't know the style values ahead of time. In other cases, applying plain CSS classes with `className` is more efficient. [Read more about applying CSS with `className` and `styles`.](#applying-css-styles)
+
+These standard DOM props are also supported for all built-in components:
+
+* [`accessKey`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey): A string. Specifies a keyboard shortcut for the element. [Not generally recommended.](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey#accessibility_concerns)
+* [`aria-*`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes): ARIA attributes let you specify the accessibility tree information for this element. See [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes) for a complete reference. In React, all ARIA attribute names are exactly the same as in HTML.
+* [`autoCapitalize`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize): A string. Specifies whether and how the user input should be capitalized.
+* [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): A string. Specifies the element's CSS class name. [Read more about applying CSS styles.](#applying-css-styles)
+* [`contentEditable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable): A boolean. If `true`, the browser lets the user edit the rendered element directly. This is used to implement rich text input libraries like [Lexical.](https://lexical.dev/) React warns if you try to pass React children to an element with `contentEditable={true}` because React will not be able to update its content after user edits.
+* [`data-*`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*): Data attributes let you attach some string data to the element, for example `data-fruit="banana"`. In React, they are not commonly used because you would usually read data from props or state instead.
+* [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir): Either `'ltr'` or `'rtl'`. Specifies the text direction of the element.
+* [`draggable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable): A boolean. Specifies whether the element is draggable. Part of [HTML Drag and Drop API.](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)
+* [`enterKeyHint`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/enterKeyHint): A string. Specifies which action to present for the enter key on virtual keyboards.
+* [`htmlFor`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor): A string. For [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) and [`<output>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output), lets you [associate the label with some control.](/apis/react-dom/components/input#providing-a-label-for-an-input) Same as [`for` HTML attribute.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for) React uses the standard DOM property names (`htmlFor`) instead of HTML attribute names.
+* [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden): A boolean or a string. Specifies whether the element should be hidden.
+* [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id): A string. Specifies a unique identifier for this element, which can be used to find it later or connect it with other elements. Generate it with [`useId`](/apis/react/useId) to avoid clashes between multiple instances of the same component.
+* [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is): A string. If specified, the component will behave like a [custom element.](/apis/react-dom/components#custom-html-elements)
+* [`inputMode`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode): A string. Specifies what kind of keyboard to display (for example, text, number or telephone).
+* [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop): A string. Specifies which property the element represents for structured data crawlers.
+* [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang): A string. Specifies the language of the element.
+* [`onAnimationEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event): An [`AnimationEvent` handler](#animationevent-handler) function. Fires when a CSS animation completes.
+* `onAnimationEndCapture`: A version of `onAnimationEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onAnimationIteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationiteration_event): An [`AnimationEvent` handler](#animationevent-handler) function. Fires when an iteration of a CSS animation ends, and another one begins.
+* `onAnimationIterationCapture`: A version of `onAnimationIteration` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onAnimationStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event): An [`AnimationEvent` handler](#animationevent-handler) function. Fires when a CSS animation starts.
+* `onAnimationStartCapture`: `onAnimationStart`, but fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onAuxClick`](https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when a non-primary pointer button was clicked.
+* `onAuxClickCapture`: A version of `onAuxClick` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* `onBeforeInput`: An [`InputEvent` handler](#inputevent-handler) function. Fires before the value of an editable element is modified. React does *not* yet use the native [`beforeinput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event) event, and instead attempts to polyfill it using other events.
+* `onBeforeInputCapture`: A version of `onBeforeInput` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* `onBlur`: A [`FocusEvent` handler](#focusevent-handler) function. Fires when an element lost focus. Unlike the built-in browser [`blur`](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event) event, in React the `onBlur` event bubbles.
+* `onBlurCapture`: A version of `onBlur` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onClick`](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the primary button was clicked on the pointing device.
+* `onClickCapture`: A version of `onClick` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onCompositionStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event): A [`CompositionEvent` handler](#compositionevent-handler) function. Fires when an [input method editor](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) starts a new composition session.
+* `onCompositionStartCapture`: A version of `onCompositionStart` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onCompositionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event): A [`CompositionEvent` handler](#compositionevent-handler) function. Fires when an [input method editor](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) completes or cancels a composition session.
+* `onCompositionEndCapture`: A version of `onCompositionEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onCompositionUpdate`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event): A [`CompositionEvent` handler](#compositionevent-handler) function. Fires when an [input method editor](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) receives a new character.
+* `onCompositionUpdateCapture`: A version of `onCompositionUpdate` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onContextMenu`](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the user tries to open a context menu.
+* `onContextMenuCapture`: A version of `onContextMenu` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onCopy`](https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event): A [`ClipboardEvent` handler](#clipboardevent-handler) function. Fires when the user tries to copy something into the clipboard.
+* `onCopyCapture`: A version of `onCopy` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onCut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/cut_event): A [`ClipboardEvent` handler](#clipboardevent-handler) function. Fires when the user tries to cut something into the clipboard.
+* `onCutCapture`: A version of `onCut` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* `onDoubleClick`: A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the user clicks twice. Corresponds to the browser [`dblclick` event.](https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event)
+* `onDoubleClickCapture`: A version of `onDoubleClick` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onDrag`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drag_event): A [`DragEvent` handler](#dragevent-handler) function. Fires while the user is dragging something. 
+* `onDragCapture`: A version of `onDrag` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onDragEnd`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragend_event): A [`DragEvent` handler](#dragevent-handler) function. Fires when the user stops dragging something. 
+* `onDragEndCapture`: A version of `onDragEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onDragEnter`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragenter_event): A [`DragEvent` handler](#dragevent-handler) function. Fires when the dragged content enters a valid drop target. 
+* `onDragEnterCapture`: A version of `onDragEnter` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onDragOver`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragover_event): A [`DragEvent` handler](#dragevent-handler) function. Fires on a valid drop target while the dragged content is dragged over it. You must call `e.preventDefault()` here to allow dropping.
+* `onDragOverCapture`: A version of `onDragOver` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onDragStart`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragstart_event): A [`DragEvent` handler](#dragevent-handler) function. Fires when the user starts dragging an element.
+* `onDragStartCapture`: A version of `onDragStart` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onDrop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event): A [`DragEvent` handler](#dragevent-handler) function. Fires when something is dropped on a valid drop target.
+* `onDropCapture`: A version of `onDrop` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* `onFocus`: A [`FocusEvent` handler](#focusevent-handler) function. Fires when an element lost focus. Unlike the built-in browser [`focus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event) event, in React the `onFocus` event bubbles.
+* `onFocusCapture`: A version of `onFocus` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onGotPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/gotpointercapture_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when an element programmatically captures a pointer.
+* `onGotPointerCaptureCapture`: A version of `onGotPointerCapture` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onKeyDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event): A [`KeyboardEvent` handler](#pointerevent-handler) function. Fires when a key is pressed.
+* `onKeyDownCapture`: A version of `onKeyDown` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onKeyPress`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event): A [`KeyboardEvent` handler](#pointerevent-handler) function. Deprecated. Use `onKeyDown` or `onBeforeInput` instead.
+* `onKeyPressCapture`: A version of `onKeyPress` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onKeyUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event): A [`KeyboardEvent` handler](#pointerevent-handler) function. Fires when a key is released.
+* `onKeyUpCapture`: A version of `onKeyUp` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onLostPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lostpointercapture_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when an element stops capturing a pointer.
+* `onLostPointerCaptureCapture`: A version of `onLostPointerCapture` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onMouseDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer is pressed down.
+* `onMouseDownCapture`: A version of `onMouseDown` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onMouseEnter`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer moves inside an element. Does not have a capture phase. Instead, `onMouseLeave` and `onMouseEnter` propagate from the element being left to the one being entered.
+* [`onMouseLeave`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer moves outside an element. Does not have a capture phase. Instead, `onMouseLeave` and `onMouseEnter` propagate from the element being left to the one being entered.
+* [`onMouseMove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer changes coordinates.
+* `onMouseMoveCapture`: A version of `onMouseMove` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onMouseOut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer moves outside an element, or if it moves into a child element.
+* `onMouseOutCapture`: A version of `onMouseOut` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onMouseUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseup_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer is released.
+* `onMouseUpCapture`: A version of `onMouseUp` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onPointerCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointercancel_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when the browser cancels a pointer interaction.
+* `onPointerCancelCapture`: A version of `onPointerCancel` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onPointerDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerdown_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer becomes active.
+* `onPointerDownCapture`: A version of `onPointerDown` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onPointerEnter`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerenter_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer moves inside an element. Does not have a capture phase. Instead, `onPointerLeave` and `onPointerEnter` propagate from the element being left to the one being entered.
+* [`onPointerLeave`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerleave_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer moves outside an element. Does not have a capture phase. Instead, `onPointerLeave` and `onPointerEnter` propagate from the element being left to the one being entered.
+* [`onPointerMove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointermove_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer changes coordinates.
+* `onPointerMoveCapture`: A version of `onPointerMove` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onPointerOut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer moves outside an element, if the pointer interaction is cancelled, and [a few other reasons.](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event)
+* `onPointerOutCapture`: A version of `onPointerOut` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onPointerUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerup_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer is no longer active.
+* `onPointerUpCapture`: A version of `onPointerUp` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onPaste`](https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event): A [`ClipboardEvent` handler](#clipboardevent-handler) function. Fires when the user tries to paste something from the clipboard.
+* `onPasteCapture`: A version of `onPaste` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onScroll`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event): An [`Event` handler](#event-handler) function. Fires when an element has been scrolled. This event does not bubble.
+* `onScrollCapture`: A version of `onScroll` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event): An [`Event` handler](#event-handler) function. Fires after the selection inside an editable element like an input changes. React extends the `onSelect` event to work for `contentEditable={true}` elements as well. In addition, React extends it to fire for empty selection and on edits (which may affect the selection).
+* `onSelectCapture`: A version of `onSelect` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onTouchCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchcancel_event): A [`TouchEvent` handler](#touchevent-handler) function. Fires when the browser cancels a touch interaction.
+* `onTouchCancelCapture`: A version of `onTouchCancel` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onTouchEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchend_event): A [`TouchEvent` handler](#touchevent-handler) function. Fires when one or more touch points are removed.
+* `onTouchEndCapture`: A version of `onTouchEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onTouchMove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchmove_event): A [`TouchEvent` handler](#touchevent-handler) function. Fires one or more touch points are moved.
+* `onTouchMoveCapture`: A version of `onTouchMove` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onTouchStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchstart_event): A [`TouchEvent` handler](#touchevent-handler) function. Fires when one or more touch points are placed.
+* `onTouchStartCapture`: A version of `onTouchStart` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onTransitionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event): A [`TransitionEvent` handler](#transitionevent-handler) function. Fires when a CSS transition completes.
+* `onTransitionEndCapture`: A version of `onTransitionEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onWheel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event): A [`WheelEvent` handler](#wheelevent-handler) function. Fires when the user rotates a wheel button.
+* `onWheelCapture`: A version of `onWheel` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles): A string. Specifies the element role explicitly for assistive technologies.
+nt.
+* [`slot`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles): A string. Specifies the slot name when using shadow DOM. In React, an equivalent pattern is typically achieved by passing JSX as props, for example `<Layout left={<Sidebar />} right={<Content />} />`.
+* [`spellCheck`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck): A boolean or null. If explicitly set to `true` or `false`, enables or disables spellchecking.
+* [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex): A number. Overrides the default Tab button behavior. [Avoid using values other than `-1` and `0`.](https://www.tpgi.com/using-the-tabindex-attribute/)
+* [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title): A string. Specifies the tooltip text for the element.
+* [`translate`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate): Either `'yes'` or `'no'`. Passing `'no'` excludes the element content from being translated.
+
+You can also pass custom attributes as props, for example `mycustomprop="someValue".` This can be useful when integrating with third-party libraries. The custom attribute name must be lowercase and must not start with `on`. The value will be converted to a string. If you pass `null` or `undefined`, the custom attribute will be removed.
+
+These events fire only for the [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) elements:
+
+* [`onReset`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset_event): An [`Event` handler](#event-handler) function. Fires when a form gets reset.
+* `onResetCapture`: A version of `onReset` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onSubmit`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event): An [`Event` handler](#event-handler) function. Fires when a form gets submitted.
+* `onSubmitCapture`: A version of `onSubmit` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+
+These events fire only for the [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) elements. Unlike browser events, they bubble in React:
+
+* [`onCancel`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/cancel_event): An [`Event` handler](#event-handler) function. Fires when the user tries to dismiss the dialog.
+* `onCancelCapture`: A version of `onCancel` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+capture-phase-events)
+* [`onClose`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close_event): An [`Event` handler](#event-handler) function. Fires when a dialog has been closed.
+* `onCloseCapture`: A version of `onClose` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+
+These events fire only for the [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) elements. Unlike browser events, they bubble in React:
+
+* [`onToggle`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/toggle_event): An [`Event` handler](#event-handler) function. Fires when the user toggles the details.
+* `onToggleCapture`: A version of `onToggle` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+capture-phase-events)
+
+These events fire for [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe), [`<object>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object), [`<embed>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed), [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link), and [SVG `<image>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag) elements. Unlike browser events, they bubble in React:
+
+* `onLoad`: An [`Event` handler](#event-handler) function. Fires when the resource has loaded.
+* `onLoadCapture`: A version of `onLoad` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onError`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error_event): An [`Event` handler](#event-handler) function. Fires when the resource could not be loaded.
+* `onErrorCapture`: A version of `onError` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+
+These events fire for resources like [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) and [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video). Unlike browser events, they bubble in React:
+
+* [`onAbort`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/abort_event): An [`Event` handler](#event-handler) function. Fires when the resource has not fully loaded, but not due to an error.
+* `onAbortCapture`: A version of `onAbort` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onCanPlay`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event): An [`Event` handler](#event-handler) function. Fires when there's enough data to start playing, but not enough to play to the end without buffering.
+* `onCanPlayCapture`: A version of `onCanPlay` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onCanPlayThrough`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event): An [`Event` handler](#event-handler) function. Fires when there's enough data that it's likely possible to start playing without buffering until the end.
+* `onCanPlayThroughCapture`: A version of `onCanPlayThrough` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onDurationChange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/durationchange_event): An [`Event` handler](#event-handler) function. Fires when the media duration has updated.
+* `onDurationChangeCapture`: A version of `onDurationChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onEmptied`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/emptied_event): An [`Event` handler](#event-handler) function. Fires when the media has become empty.
+* `onEmptiedCapture`: A version of `onEmptied` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onEncrypted`](https://w3c.github.io/encrypted-media/#dom-evt-encrypted): An [`Event` handler](#event-handler) function. Fires when the browser encounters encrypted media.
+* `onEncryptedCapture`: A version of `onEncrypted` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onEnded`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event): An [`Event` handler](#event-handler) function. Fires when the playback stops because there's nothing left to play.
+* `onEndedCapture`: A version of `onEnded` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onError`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error_event): An [`Event` handler](#event-handler) function. Fires when the resource could not be loaded.
+* `onErrorCapture`: A version of `onError` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onLoadedData`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event): An [`Event` handler](#event-handler) function. Fires when the current playback frame has loaded.
+* `onLoadedDataCapture`: A version of `onLoadedData` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onLoadedMetadata`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event): An [`Event` handler](#event-handler) function. Fires when metadata has loaded.
+* `onLoadedMetadataCapture`: A version of `onLoadedMetadata` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onLoadStart`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadstart_event): An [`Event` handler](#event-handler) function. Fires when the browser started loading the resource.
+* `onLoadStartCapture`: A version of `onLoadStart` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onPause`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event): An [`Event` handler](#event-handler) function. Fires when the media was paused.
+* `onPauseCapture`: A version of `onPause` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onPlay`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event): An [`Event` handler](#event-handler) function. Fires when the media is no longer paused.
+* `onPlayCapture`: A version of `onPlay` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onPlaying`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playing_event): An [`Event` handler](#event-handler) function. Fires when the media starts or restarts playing.
+* `onPlayingCapture`: A version of `onPlaying` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onProgress`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/progress_event): An [`Event` handler](#event-handler) function. Fires periodically while the resource is loading.
+* `onProgressCapture`: A version of `onProgress` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onRateChange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ratechange_event): An [`Event` handler](#event-handler) function. Fires when playback rate changes.
+* `onRateChangeCapture`: A version of `onRateChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* `onResize`: An [`Event` handler](#event-handler) function. Fires when video changes size.
+* `onResizeCapture`: A version of `onResize` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onSeeked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeked_event): An [`Event` handler](#event-handler) function. Fires when a seek operation completes.
+* `onSeekedCapture`: A version of `onSeeked` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onSeeking`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event): An [`Event` handler](#event-handler) function. Fires when a seek operation starts.
+* `onSeekingCapture`: A version of `onSeeking` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onStalled`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/stalled_event): An [`Event` handler](#event-handler) function. Fires when the browser is waiting for data but it keeps not loading.
+* `onStalledCapture`: A version of `onStalled` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onSuspend`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event): An [`Event` handler](#event-handler) function. Fires when loading the resource was suspended.
+* `onSuspendCapture`: A version of `onSuspend` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onTimeUpdate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event): An [`Event` handler](#event-handler) function. Fires when the current playback time updates.
+* `onTimeUpdateCapture`: A version of `onTimeUpdate` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onVolumeChange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volumechange_event): An [`Event` handler](#event-handler) function. Fires when the volume has changed.
+* `onVolumeChangeCapture`: A version of `onVolumeChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onWaiting`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/waiting_event): An [`Event` handler](#event-handler) function. Fires when the playback stopped due to temporary lack of data.
+* `onWaitingCapture`: A version of `onWaiting` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+
+#### Caveats {/*common-caveats*/}
+
+- You cannot pass both `children` and `dangerouslySetInnerHTML` at the same time.
+- Some events (like `onAbort` and `onLoad`) don't bubble in the browser, but bubble in React.
+
+---
+
+### `ref` callback function {/*ref-callback*/}
+
+Instead of a ref object (like the one returned by [`useRef`](/apis/react/useRef#manipulating-the-dom-with-a-ref)), you may pass a function to the `ref` attribute.
+
+```js
+<div ref={(node) => console.log(node)} />
+```
+
+[See an example of using the `ref` callback.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
+
+When the `<div>` DOM node is added to the screen, React will call your `ref` callback with the DOM `node` as the argument. When that `<div>` DOM node is removed, React will call your `ref` callback with `null`.
+
+React will also call your `ref` callback whenever you pass a *different* `ref` callback. In the above example, `(node) => { ... }` is a different function on every render. This is why, when your component re-renders, the *previous* function will be called with `null` as the argument, and the *next* function will be called with the DOM node.
+
+#### Parameters {/*ref-callback-parameters*/}
+
+* `node`: A DOM node or `null`. React will pass you the DOM node when the ref gets attached, and `null` when the ref gets detached. Unless you pass the same function reference for the `ref` callback on every render, the callback will get temporarily detached and re-attached during ever re-render of the component.
+
+#### Returns {/*returns*/}
+
+Do not return anything from the `ref` callback.
+
+---
+
+### React event object {/*react-event-object*/}
+
+Your event handlers will receive a *React event object.* It is also sometimes known as a "synthetic event".
+
+```js
+<button onClick={e => {
+  console.log(e); // React event object
+}} />
+```
+
+It conforms to the same standard as the underlying DOM events, but fixes some browser inconsistencies.
+
+Some React events do not map directly to the browser's native events. For example in `onMouseLeave`, `e.nativeEvent` will point to a `mouseout` event. The specific mapping is not part of the public API and may change in the future. If you need the underlying browser event for some reason, read it from `e.nativeEvent`.
+
+#### Properties {/*react-event-object-properties*/}
+
+React event objects implement some of the standard [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) properties:
+
+* [`bubbles`](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles): A boolean. Returns whether the event bubbles through the DOM. 
+* [`cancelable`](https://developer.mozilla.org/en-US/docs/Web/API/Event/cancelable): A boolean. Returns whether the event can be canceled.
+* [`currentTarget`](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget): A DOM node. Returns the node to which the current handler is attached in the React tree.
+* [`defaultPrevented`](https://developer.mozilla.org/en-US/docs/Web/API/Event/defaultPrevented): A boolean. Returns whether `preventDefault` was called.
+* [`eventPhase`](https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase): A number. Returns which phase the event is currently in.
+* [`isTrusted`](https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted): A boolean. Returns whether the event was initiated by user.
+* [`target`](https://developer.mozilla.org/en-US/docs/Web/API/Event/target): A DOM node. Returns the node on which the event has occurred (which could be a distant child).
+* [`timeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/Event/timeStamp): A number. Returns the time when the event occurred.
+
+Additionally, React event objects provide these properties:
+
+* `nativeEvent`: A DOM [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). The original browser event object.
+
+#### Methods {/*react-event-object-methods*/}
+
+React event objects implement some of the standard [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) methods:
+
+* [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault): Prevents the default browser action for the event.
+* [`stopPropagation()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation): Stops the event propagation through the React tree.
+
+Additionally, React event objects provide these methods:
+
+* `isDefaultPrevented()`: Returns a boolean value indicating whether `preventDefault` was called.
+* `isPropagationStopped()`: Returns a boolean value indicating whether `stopPropagation` was called.
+* `persist()`: Not used with React DOM. With React Native, call this to read event's properties after the event.
+* `isPersistent()`: Not used with React DOM. With React Native, returns whether `persist` has been called.
+
+#### Caveats {/*react-event-object-caveats*/}
+
+* The values of `currentTarget`, `eventPhase`, `target`, and `type` reflect the values your React code expects. Under the hood, React attaches event handlers at the root, but this is not reflected in React event objects. For example, `e.currentTarget` may not be the same as the underlying `e.nativeEvent.currentTarget`. For polyfilled events, `e.type` (React event type) may differ from `e.nativeEvent.type` (underlying type).
+
+---
+
+### `AnimationEvent` handler function {/*animationevent-handler*/}
+
+An event handler type for the [CSS animation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) events.
+
+```js
+<div
+  onAnimationStart={e => console.log('onAnimationStart')}
+  onAnimationIteration={e => console.log('onAnimationStart')}
+  onAnimationEnd={e => console.log('onAnimationStart')}
+/>
+```
+
+#### Parameters {/*animationevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`AnimationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent) properties:
+  * [`animationName`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/animationName)
+  * [`elapsedTime`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/elapsedTime)
+  * [`pseudoElement`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent)
+
+---
+
+### `ClipboardEvent` handler function {/*clipboadevent-handler*/}
+
+An event handler type for the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) events.
+
+```js
+<input
+  onCopy={e => console.log('onCopy')}
+  onCut={e => console.log('onCut')}
+  onPaste={e => console.log('onPaste')}
+/>
+```
+
+#### Parameters {/*clipboadevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`ClipboardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent) properties:
+
+  * [`clipboardData`](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData)
+
+---
+
+### `CompositionEvent` handler function {/*compositionevent-handler*/}
+
+An event handler type for the [input method editor (IME)](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) events.
+
+```js
+<input
+  onCompositionStart={e => console.log('onCompositionStart')}
+  onCompositionUpdate={e => console.log('onCompositionUpdate')}
+  onCompositionEnd={e => console.log('onCompositionEnd')}
+/>
+```
+
+#### Parameters {/*compositionevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`CompositionEvent`](https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent) properties:
+  * [`data`](https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent/data)
+
+---
+
+### `DragEvent` handler function {/*dragevent-handler*/}
+
+An event handler type for the [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) events.
+
+```js
+<>
+  <div
+    draggable={true}
+    onDragStart={e => console.log('onDragStart')}
+    onDragEnd={e => console.log('onDragEnd')}
+  >
+    Drag source
+  </div>
+
+  <div
+    onDragEnter={e => console.log('onDragEnter')}
+    onDragLeave={e => console.log('onDragLeave')}
+    onDragOver={e => { e.preventDefault(); console.log('onDragOver'); }}
+    onDrop={e => console.log('onDrop')}
+  >
+    Drop target
+  </div>
+</>
+```
+
+#### Parameters {/*dragevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`DragEvent`](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent) properties:
+  * [`dataTransfer`](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent/dataTransfer)
+
+  It also includes the inherited [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) properties:
+
+  * [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey)
+  * [`button`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button)
+  * [`buttons`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons)
+  * [`ctrlKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/ctrlKey)
+  * [`clientX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX)
+  * [`clientY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY)
+  * [`getModifierState(key)`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/getModifierState)
+  * [`metaKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/metaKey)
+  * [`movementX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX)
+  * [`movementY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementY)
+  * [`pageX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX)
+  * [`pageY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY)
+  * [`relatedTarget`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget)
+  * [`screenX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenX)
+  * [`screenY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY)
+  * [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKey)
+
+  It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+
+  * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
+  * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
+
+---
+
+### `FocusEvent` handler function {/*focusevent-handler*/}
+
+An event handler type for the focus events.
+
+```js
+<input
+  onFocus={e => console.log('onFocus')}
+  onBlur={e => console.log('onBlur')}
+/>
+```
+
+[See an example.](#handling-focus-events)
+
+#### Parameters {/*focusevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`FocusEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent) properties:
+  * [`relatedTarget`](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget)
+
+  It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+
+  * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
+  * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
+
+---
+
+### `Event` handler function {/*event-handler*/}
+
+An event handler type for generic events.
+
+#### Parameters {/*event-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with no additional properties.
+
+---
+
+### `InputEvent` handler function {/*inputevent-handler*/}
+
+An event handler type for the `onBeforeInput` event.
+
+```js
+<input onBeforeInput={e => console.log('onBeforeInput')} />
+```
+
+#### Parameters {/*inputevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent) properties:
+  * [`data`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/data)
+
+---
+
+### `KeyboardEvent` handler function {/*keyboardevent-handler*/}
+
+An event handler type for keyboard events.
+
+```js
+<input
+  onKeyDown={e => console.log('onKeyDown')}
+  onKeyUp={e => console.log('onKeyUp')}
+/>
+```
+
+[See an example.](#handling-keyboard-events)
+
+#### Parameters {/*keyboardevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`KeyboardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) properties:
+  * [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/altKey)
+  * [`charCode`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/charCode)
+  * [`code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code)
+  * [`ctrlKey`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ctrlKey)
+  * [`getModifierState(key)`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState)
+  * [`key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)
+  * [`keyCode`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode)
+  * [`locale`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/locale)
+  * [`metaKey`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey)
+  * [`location`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/location)
+  * [`repeat`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat)
+  * [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/shiftKey)
+  * [`which`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which)
+
+  It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+
+  * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
+  * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
+
+---
+
+### `MouseEvent` handler function {/*mouseevent-handler*/}
+
+An event handler type for mouse events.
+
+```js
+<div
+  onClick={e => console.log('onClick')}
+  onMouseEnter={e => console.log('onMouseEnter')}
+  onMouseOver={e => console.log('onMouseOver')}
+  onMouseDown={e => console.log('onMouseDown')}
+  onMouseUp={e => console.log('onMouseUp')}
+  onMouseLeave={e => console.log('onMouseLeave')}
+/>
+```
+
+[See an example.](#handling-mouse-events)
+
+#### Parameters {/*mouseevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) properties:
+  * [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey)
+  * [`button`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button)
+  * [`buttons`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons)
+  * [`ctrlKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/ctrlKey)
+  * [`clientX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX)
+  * [`clientY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY)
+  * [`getModifierState(key)`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/getModifierState)
+  * [`metaKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/metaKey)
+  * [`movementX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX)
+  * [`movementY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementY)
+  * [`pageX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX)
+  * [`pageY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY)
+  * [`relatedTarget`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget)
+  * [`screenX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenX)
+  * [`screenY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY)
+  * [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKey)
+
+  It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+
+  * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
+  * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
+
+---
+
+### `PointerEvent` handler function {/*pointerevent-handler*/}
+
+An event handler type for [pointer events.](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)
+
+```js
+<div
+  onPointerEnter={e => console.log('onPointerEnter')}
+  onPointerMove={e => console.log('onPointerMove')}
+  onPointerDown={e => console.log('onPointerDown')}
+  onPointerUp={e => console.log('onPointerUp')}
+  onPointerLeave={e => console.log('onPointerLeave')}
+/>
+```
+
+[See an example.](#handling-pointer-events)
+
+#### Parameters {/*pointerevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`PointerEvent`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) properties:
+  * [`height`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height)
+  * [`isPrimary`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary)
+  * [`pointerId`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId)
+  * [`pointerType`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType)
+  * [`pressure`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure)
+  * [`tangentialPressure`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tangentialPressure)
+  * [`tiltX`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX)
+  * [`tiltY`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY)
+  * [`twist`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/twist)
+  * [`width`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width)
+
+  It also includes the inherited [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) properties:
+
+  * [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey)
+  * [`button`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button)
+  * [`buttons`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons)
+  * [`ctrlKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/ctrlKey)
+  * [`clientX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX)
+  * [`clientY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY)
+  * [`getModifierState(key)`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/getModifierState)
+  * [`metaKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/metaKey)
+  * [`movementX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX)
+  * [`movementY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementY)
+  * [`pageX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX)
+  * [`pageY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY)
+  * [`relatedTarget`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget)
+  * [`screenX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenX)
+  * [`screenY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY)
+  * [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKey)
+
+  It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+
+  * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
+  * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
+
+---
+
+### `TouchEvent` handler function {/*touchevent-handler*/}
+
+An event handler type for [touch events.](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events)
+
+```js
+<div
+  onTouchStart={e => console.log('onTouchStart')}
+  onTouchMove={e => console.log('onTouchMove')}
+  onTouchEnd={e => console.log('onTouchEnd')}
+  onTouchCancel={e => console.log('onTouchCancel')}
+/>
+```
+
+#### Parameters {/*touchevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`TouchEvent`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent) properties:
+  * [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/altKey)
+  * [`ctrlKey`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/ctrlKey)
+  * [`changedTouches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/changedTouches)
+  * [`getModifierState(key)`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/getModifierState)
+  * [`metaKey`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/metaKey)
+  * [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/shiftKey)
+  * [`touches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches)
+  * [`targetTouches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/targetTouches)
+  
+  It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+
+  * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
+  * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
+
+---
+
+### `TransitionEvent` handler function {/*transitionevent-handler*/}
+
+An event handler type for the CSS transition events.
+
+```js
+<div
+  onTransitionEnd={e => console.log('onTransitionEnd')}
+/>
+```
+
+#### Parameters {/*transitionevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`TransitionEvent`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent) properties:
+  * [`elapsedTime`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent/elapsedTime)
+  * [`propertyName`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent/propertyName)
+  * [`pseudoElement`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent/pseudoElement)
+
+---
+
+### `UIEvent` handler function {/*uievent-handler*/}
+
+An event handler type for generic UI events.
+
+```js
+<div
+  onScroll={e => console.log('onScroll')}
+/>
+```
+
+#### Parameters {/*uievent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+  * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
+  * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
+
+---
+
+### `WheelEvent` handler function {/*wheelevent-handler*/}
+
+An event handler type for the `onWheel` event.
+
+```js
+<div
+  onScroll={e => console.log('onScroll')}
+/>
+```
+
+#### Parameters {/*wheelevent-handler-parameters*/}
+
+* `e`: A [React event object](#react-event-object) with these extra [`WheelEvent`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent) properties:
+  * [`deltaMode`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaMode)
+  * [`deltaX`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaX)
+  * [`deltaY`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY)
+  * [`deltaZ`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaZ)
+
+
+  It also includes the inherited [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) properties:
+
+  * [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey)
+  * [`button`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button)
+  * [`buttons`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons)
+  * [`ctrlKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/ctrlKey)
+  * [`clientX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX)
+  * [`clientY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY)
+  * [`getModifierState(key)`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/getModifierState)
+  * [`metaKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/metaKey)
+  * [`movementX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX)
+  * [`movementY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementY)
+  * [`pageX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX)
+  * [`pageY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY)
+  * [`relatedTarget`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget)
+  * [`screenX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenX)
+  * [`screenY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY)
+  * [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKey)
+
+  It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+
+  * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
+  * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
+
+
diff --git a/beta/src/content/apis/react-dom/components/index.md b/beta/src/content/apis/react-dom/components/index.md
new file mode 100644
index 000000000..3fc00e2bc
--- /dev/null
+++ b/beta/src/content/apis/react-dom/components/index.md
@@ -0,0 +1,263 @@
+---
+title: "react-dom: Components"
+---
+
+<Intro>
+
+React supports all of the browser built-in [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) and [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Element) components.
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Common components {/*common-components*/}
+
+All of the built-in browser components support some props and events.
+
+* [Common components (e.g. `<div>`)](/apis/react-dom/components/common)
+
+This includes React-specific props like `ref` and `dangerouslySetInnerHTML`.
+
+---
+
+## Form components {/*form-components*/}
+
+These built-in browser components accept user input:
+
+* [`<input>`](/apis/react-dom/components/input)
+* [`<select>`](/apis/react-dom/components/select)
+* [`<textarea>`](/apis/react-dom/components/textarea)
+
+They are special in React because passing the `value` prop to them makes them *[controlled.](/apis/react-dom/components/input#controlling-an-input-with-a-state-variable)*
+
+---
+
+## All HTML components {/*all-html-components*/}
+
+React supports all built-in browser HTML components. This includes:
+
+* [`<aside>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside)
+* [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio)
+* [`<b>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b)
+* [`<base>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base)
+* [`<bdi>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdi)
+* [`<bdo>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdo)
+* [`<blockquote>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote)
+* [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body)
+* [`<br>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br)
+* [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)
+* [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas)
+* [`<caption>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption)
+* [`<cite>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite)
+* [`<code>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code)
+* [`<col>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col)
+* [`<colgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup)
+* [`<data>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data)
+* [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist)
+* [`<dd>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd)
+* [`<del>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del)
+* [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
+* [`<dfn>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn)
+* [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
+* [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div)
+* [`<dl>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl)
+* [`<dt>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt)
+* [`<em>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em)
+* [`<embed>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed)
+* [`<fieldset>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)
+* [`<figcaption>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption)
+* [`<figure>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure)
+* [`<footer>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer)
+* [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
+* [`<h1>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1)
+* [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)
+* [`<header>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header)
+* [`<hgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup)
+* [`<hr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)
+* [`<html>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html)
+* [`<i>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i)
+* [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)
+* [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)
+* [`<input>`](/apis/react-dom/components/input)
+* [`<ins>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins)
+* [`<kbd>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd)
+* [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)
+* [`<legend>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend)
+* [`<li>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li)
+* [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
+* [`<main>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main)
+* [`<map>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map)
+* [`<mark>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark)
+* [`<menu>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu)
+* [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
+* [`<meter>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter)
+* [`<nav>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav)
+* [`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript)
+* [`<object>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object)
+* [`<ol>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol)
+* [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup)
+* [`<option>`](/apis/react-dom/components/option)
+* [`<output>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output)
+* [`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p)
+* [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)
+* [`<pre>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre)
+* [`<progress>`](/apis/react-dom/components/progress)
+* [`<q>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q)
+* [`<rp>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp)
+* [`<rt>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rt)
+* [`<ruby>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby)
+* [`<s>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s)
+* [`<samp>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp)
+* [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
+* [`<section>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section)
+* [`<select>`](/apis/react-dom/components/select)
+* [`<slot>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)
+* [`<small>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small)
+* [`<source>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source)
+* [`<span>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span)
+* [`<strong>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong)
+* [`<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style)
+* [`<sub>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub)
+* [`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
+* [`<sup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup)
+* [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)
+* [`<tbody>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody)
+* [`<td>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td)
+* [`<template>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)
+* [`<textarea>`](/apis/react-dom/components/textarea)
+* [`<tfoot>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot)
+* [`<th>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th)
+* [`<thead>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead)
+* [`<time>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time)
+* [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title)
+* [`<tr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr)
+* [`<track>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track)
+* [`<u>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u)
+* [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul)
+* [`<var>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var)
+* [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)
+* [`<wbr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr)
+
+<Note>
+
+Similar to the [DOM standard,](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) React uses a `camelCase` convention for prop names. For example, you'll write `tabIndex` instead of `tabindex`. You can convert existing HTML to JSX with an [online converter.](https://transform.tools/html-to-jsx)
+
+</Note>
+
+---
+
+### Custom HTML elements {/*custom-html-elements*/}
+
+If you render a tag with a dash, like `<my-element>`, React will assume you want to render a [custom HTML element.](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) In React, rendering custom elements works differently from rendering built-in browser tags:
+
+- All custom element props are serialized to strings and are always set using attributes.
+- Custom elements accept `class` rather than `className`, and `for` rather than `htmlFor`.
+
+If you render a built-in browser HTML element with an [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is) attribute, it will also be treated as a custom element.
+
+<Note>
+
+[A future version of React will include more comprehensive support for custom elements.](https://github.com/facebook/react/issues/11347#issuecomment-1122275286)
+
+You can try it by upgrading React packages to the most recent experimental version:
+
+- `react@experimental`
+- `react-dom@experimental`
+
+Experimental versions of React may contain bugs. Don't use them in production.
+
+</Note>
+---
+
+## All SVG components {/*all-svg-components*/}
+
+React supports all built-in browser SVG components. This includes:
+
+* [`<a>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a)
+* [`<animate>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate)
+* [`<animateMotion>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion)
+* [`<animateTransform>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform)
+* [`<circle>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle)
+* [`<clipPath>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath)
+* [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs)
+* [`<desc>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/desc)
+* [`<discard>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/discard)
+* [`<ellipse>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse)
+* [`<feBlend>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feBlend)
+* [`<feColorMatrix>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix)
+* [`<feComponentTransfer>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComponentTransfer)
+* [`<feComposite>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComposite)
+* [`<feConvolveMatrix>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feConvolveMatrix)
+* [`<feDiffuseLighting>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDiffuseLighting)
+* [`<feDisplacementMap>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDisplacementMap)
+* [`<feDistantLight>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDistantLight)
+* [`<feDropShadow>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDropShadow)
+* [`<feFlood>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feFlood)
+* [`<feFuncA>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feFuncA)
+* [`<feFuncB>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feFuncB)
+* [`<feFuncG>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feFuncG)
+* [`<feFuncR>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feFuncR)
+* [`<feGaussianBlur>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur)
+* [`<feImage>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feImage)
+* [`<feMerge>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feMerge)
+* [`<feMergeNode>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feMergeNode)
+* [`<feMorphology>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feMorphology)
+* [`<feOffset>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feOffset)
+* [`<fePointLight>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/fePointLight)
+* [`<feSpecularLighting>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feSpecularLighting)
+* [`<feSpotLight>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feSpotLight)
+* [`<feTile>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTile)
+* [`<feTurbulence>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence)
+* [`<filter>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter)
+* [`<foreignObject>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject)
+* [`<g>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g)
+* `<hatch>`
+* `<hatchpath>`
+* [`<image>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image)
+* [`<line>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line)
+* [`<linearGradient>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient)
+* [`<marker>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker)
+* [`<mask>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask)
+* [`<metadata>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/metadata)
+* [`<mpath>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mpath)
+* [`<path>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path)
+* [`<pattern>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern)
+* [`<polygon>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon)
+* [`<polyline>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline)
+* [`<radialGradient>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/radialGradient)
+* [`<rect>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect)
+* [`<script>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/script)
+* [`<set>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/set)
+* [`<stop>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/stop)
+* [`<style>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/style)
+* [`<svg>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg)
+* [`<switch>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/switch)
+* [`<symbol>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol)
+* [`<text>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text)
+* [`<textPath>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath)
+* [`<title>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title)
+* [`<tspan>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan)
+* [`<use>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use)
+* [`<view>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/view)
+
+<Note>
+
+Similar to the [DOM standard,](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) React uses a `camelCase` convention for prop names. For example, you'll write `tabIndex` instead of `tabindex`. You can convert existing SVG to JSX with an [online converter.](https://transform.tools/)
+
+Namespaced attributes also have to be written without the colon:
+
+* `xlink:actuate` becomes `xlinkActuate`.
+* `xlink:arcrole` becomes `xlinkArcrole`.
+* `xlink:href` becomes `xlinkHref`.
+* `xlink:role` becomes `xlinkRole`.
+* `xlink:show` becomes `xlinkShow`.
+* `xlink:title` becomes `xlinkTitle`.
+* `xlink:type` becomes `xlinkType`.
+* `xml:base` becomes `xmlBase`.
+* `xml:lang` becomes `xmlLang`.
+* `xml:space` becomes `xmlSpace`.
+* `xmlns:xlink` becomes `xmlnsXlink`.
+
+</Note>
diff --git a/beta/src/content/apis/react-dom/components/input.md b/beta/src/content/apis/react-dom/components/input.md
new file mode 100644
index 000000000..f4ab10221
--- /dev/null
+++ b/beta/src/content/apis/react-dom/components/input.md
@@ -0,0 +1,595 @@
+---
+title: "<input>"
+---
+
+<Intro>
+
+The [built-in browser `<input>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) lets you render different kinds of form inputs.
+
+```js
+<input />
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Usage {/*usage*/}
+
+### Displaying inputs of different types {/*displaying-inputs-of-different-types*/}
+
+To display an input, render an `<input>` component. By default, it will be a text input. You can pass `type="checkbox"` for a checkbox, `type="radio"` for a radio button, [or one of the other input types.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types)
+
+<Sandpack>
+
+```js
+export default function MyForm() {
+  return (
+    <>
+      <label>
+        Text input: <input name="myInput" />
+      </label>
+      <hr />
+      <label>
+        Checkbox: <input type="checkbox" name="myCheckbox" />
+      </label>
+      <hr />
+      <p>
+        Radio buttons:
+        <label>
+          <input type="radio" name="myRadio" value="option1" />
+          Option 1
+        </label>
+        <label>
+          <input type="radio" name="myRadio" value="option2" />
+          Option 2
+        </label>
+        <label>
+          <input type="radio" name="myRadio" value="option3" />
+          Option 3
+        </label>
+      </p>
+    </>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin: 5px; }
+```
+
+</Sandpack>
+
+---
+
+### Providing a label for an input {/*providing-a-label-for-an-input*/}
+
+Typically, you will place every `<input>` inside a [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) tag. This tells the browser that this label is associated with that input. When the user clicks the label, the browser will automatically focus the input. It's also essential for accessibility: a screen reader will announce the label caption when the user focuses the associated input.
+
+If you can't nest `<input>` into a `<label>`, associate them by passing the same ID to `<input id>` and [`<label htmlFor>`.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) To avoid conflicts between multiple instances of one component, generate such an ID with [`useId`.](/apis/react/useId)
+
+<Sandpack>
+
+```js
+import { useId } from 'react';
+
+export default function Form() {
+  const ageInputId = useId();
+  return (
+    <>
+      <label>
+        Your first name:
+        <input name="firstName" />
+      </label>
+      <hr />
+      <label htmlFor={ageInputId}>Your age:</label>
+      <input id={ageInputId} name="age" type="number" />
+    </>
+  );
+}
+```
+
+```css
+input { margin: 5px; }
+```
+
+</Sandpack>
+
+---
+
+### Providing an initial value for an input {/*providing-an-initial-value-for-an-input*/}
+
+You can optionally specify the initial value for any input. Pass it as the `defaultValue` string for text inputs. Checkboxes and radio buttons should specify the initial value with the `defaultChecked` boolean instead.
+
+<Sandpack>
+
+```js
+export default function MyForm() {
+  return (
+    <>
+      <label>
+        Text input: <input name="myInput" defaultValue="Some initial value" />
+      </label>
+      <hr />
+      <label>
+        Checkbox: <input type="checkbox" name="myCheckbox" defaultChecked={true} />
+      </label>
+      <hr />
+      <p>
+        Radio buttons:
+        <label>
+          <input type="radio" name="myRadio" value="option1" />
+          Option 1
+        </label>
+        <label>
+          <input
+            type="radio"
+            name="myRadio"
+            value="option2"
+            defaultChecked={true} 
+          />
+          Option 2
+        </label>
+        <label>
+          <input type="radio" name="myRadio" value="option3" />
+          Option 3
+        </label>
+      </p>
+    </>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin: 5px; }
+```
+
+</Sandpack>
+
+---
+
+### Reading the input values when submitting a form {/*reading-the-input-values-when-submitting-a-form*/}
+
+Add a [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) around your inputs with a [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) inside. It will call your `<form onSubmit>` event handler. By default, the browser will send the form data to the current URL and refresh the page. You can override that behavior by calling `e.preventDefault()`. To read the form data, use [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
+<Sandpack>
+
+```js
+export default function MyForm() {
+  function handleSubmit(e) {
+    // Prevent the browser from reloading the page
+    e.preventDefault();
+
+    // Read the form data
+    const form = e.target;
+    const formData = new FormData(form);
+
+    // You can pass formData as a fetch body directly:
+    fetch('/some-api', { method: form.method, body: formData });
+
+    // Or you can work with it as a plain object:
+    const formJson = Object.fromEntries(formData.entries());
+    console.log(formJson);
+  }
+
+  return (
+    <form method="post" onSubmit={handleSubmit}>
+      <label>
+        Text input: <input name="myInput" defaultValue="Some initial value" />
+      </label>
+      <hr />
+      <label>
+        Checkbox: <input type="checkbox" name="myCheckbox" defaultChecked={true} />
+      </label>
+      <hr />
+      <p>
+        Radio buttons:
+        <label><input type="radio" name="myRadio" value="option1" /> Option 1</label>
+        <label><input type="radio" name="myRadio" value="option2" defaultChecked={true} /> Option 2</label>
+        <label><input type="radio" name="myRadio" value="option3" /> Option 3</label>
+      </p>
+      <hr />
+      <button type="reset">Reset form</button>
+      <button type="submit">Submit form</button>
+    </form>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin: 5px; }
+```
+
+</Sandpack>
+
+<Note>
+
+Give a `name` to every `<input>`, for example `<input name="firstName" defaultValue="Taylor" />`. The `name` you specified will be used as a key in the form data, for example `{ firstName: "Taylor" }`.
+
+</Note>
+
+<Pitfall>
+
+By default, *any* `<button>` inside a `<form>` will submit it. This can be surprising! If you have your own custom `Button` React component, consider returning [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) instead of `<button>`. Then, to be explicit, use `<button type="submit">` for buttons that *are* supposed to submit the form.
+
+</Pitfall>
+
+---
+
+### Controlling an input with a state variable {/*controlling-an-input-with-a-state-variable*/}
+
+An input like `<input />` is *uncontrolled.* Even if you [pass an initial value](#providing-an-initial-value-for-an-input) like `<input defaultValue="Initial text" />`, your JSX only specifies the initial value. It does not control what the value should be right now.
+
+**To render a _controlled_ input, pass the `value` prop to it (or `checked` for checkboxes and radios).** React will force the input to always have the `value` you passed. Typically, you will control an input by declaring a [state variable:](/apis/react/useState)
+
+```js {2,6,7}
+function Form() {
+  const [firstName, setFirstName] = useState(''); // Declare a state variable...
+  // ...
+  return (
+    <input
+      value={firstName} // ...force the input's value to match the state variable...
+      onChange={e => setFirstName(e.target.value)} // ... and update the state variable on any edits!
+    />
+  );
+}
+```
+
+A controlled input makes sense if you needed state anyway--for example, to re-render your UI on every edit:
+
+```js {2,9}
+function Form() {
+  const [firstName, setFirstName] = useState('');
+  return (
+    <>
+      <label>
+        First name:
+        <input value={firstName} onChange={e => setFirstName(e.target.value)} />
+      </label>
+      {firstName !== '' && <p>Your name is {firstName}.</p>}
+      ...
+```
+
+It's also useful if you want to offer multiple ways to adjust the input state (for example, by clicking a button):
+
+```js {3-4,10-11,14}
+function Form() {
+  // ...
+  const [age, setAge] = useState('');
+  const ageAsNumber = Number(age);
+  return (
+    <>
+      <label>
+        Age:
+        <input
+          value={age}
+          onChange={e => setAge(e.target.value)}
+          type="number"
+        />
+        <button onClick={() => setAge(ageAsNumber + 10)}>
+          Add 10 years
+        </button>
+```
+
+The `value` you pass to controlled components should not be `undefined` or `null`. If you need the initial value to be empty (such as with the `firstName` field below), initialize your state variable to an empty string (`''`).
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function Form() {
+  const [firstName, setFirstName] = useState('');
+  const [age, setAge] = useState('20');
+  const ageAsNumber = Number(age);
+  return (
+    <>
+      <label>
+        First name:
+        <input
+          value={firstName}
+          onChange={e => setFirstName(e.target.value)}
+        />
+      </label>
+      <label>
+        Age:
+        <input
+          value={age}
+          onChange={e => setAge(e.target.value)}
+          type="number"
+        />
+        <button onClick={() => setAge(ageAsNumber + 10)}>
+          Add 10 years
+        </button>
+      </label>
+      {firstName !== '' &&
+        <p>Your name is {firstName}.</p>
+      }
+      {ageAsNumber > 0 &&
+        <p>Your age is {ageAsNumber}.</p>
+      }
+    </>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin: 5px; }
+p { font-weight: bold; }
+```
+
+</Sandpack>
+
+<Pitfall>
+
+**If you pass `value` without `onChange`, it will be impossible to type into the input.** When you control an input by passing some `value` to it, you *force* it to always have the value you passed. So if you pass a state variable as a `value` but forget to update that state variable synchronously during the `onChange` event handler, React will revert the input after every keystroke back to the `value` that you specified.
+
+</Pitfall>
+
+---
+
+### Optimizing re-rendering on every keystroke {/*optimizing-re-rendering-on-every-keystroke*/}
+
+When you use a controlled input, you set the state on every keystroke. If the component containing your state re-renders a large tree, this can get slow. There's a few ways you can optimize re-rendering performance.
+
+For example, suppose you start with a form that re-renders all page content on every keystroke:
+
+```js {5-8}
+function App() {
+  const [firstName, setFirstName] = useState('');
+  return (
+    <>
+      <form>
+        <input value={firstName} onChange={e => setFirstName(e.target.value)} />
+      </form>
+      <PageContent />
+    </>
+  );
+}
+```
+
+Since `<PageContent />` doesn't rely on the input state, you can move the input state into its own component:
+
+```js {4,10-17}
+function App() {
+  return (
+    <>
+      <SignupForm />
+      <PageContent />
+    </>
+  );
+}
+
+function SignupForm() {
+  const [firstName, setFirstName] = useState('');
+  return (
+    <form>
+      <input value={firstName} onChange={e => setFirstName(e.target.value)} />
+    </form>
+  );
+}
+```
+
+This significantly improves performance because now only `SignupForm` re-renders on every keystroke.
+
+If there is no way to avoid re-rendering (for example, if `PageContent` depends on the search input's value), [`useDeferredValue`](/apis/react/useDeferredValue#deferring-re-rendering-for-a-part-of-the-ui) lets you keep the controlled input responsive even in the middle of a large re-render.
+
+---
+
+## Reference {/*reference*/}
+
+### `<input>` {/*input*/}
+
+To display an input, render the [built-in browser `<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) component.
+
+```js
+<input name="myInput" />
+```
+
+[See more examples above.](#usage)
+
+#### Props {/*props*/}
+
+`<input>` supports all [common element props.](/apis/react-dom/components/common#props)
+
+You can [make an input controlled](#controlling-an-input-with-a-state-variable) by passing one of these props:
+
+* [`checked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#checked): A boolean. For a checkbox input or a radio button, controls whether it is selected.
+* [`value`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#value): A string. For a text input, controls its text. (For a radio button, specifies its form data.)
+
+When you pass either of them, you must also pass an `onChange` handler that updates the passed value.
+
+These `<input>` props are only relevant for uncontrolled inputs:
+
+* [`defaultChecked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#defaultChecked): A boolean. Specifies [the initial value](#providing-an-initial-value-for-an-input) for `type="checkbox"` and `type="radio"` inputs.
+* [`defaultValue`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#defaultValue): A string. Specifies [the initial value](#providing-an-initial-value-for-an-input) for a text input.
+
+These `<input>` props are relevant both for uncontrolled and controlled inputs:
+
+* [`accept`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#accept): A string. Specifies which filetypes are accepted by a `type="file"` input.
+* [`alt`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#alt): A string. Specifies the alternative image text for a `type="image"` input.
+* [`capture`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#capture): A string. Specifies the media (microphone, video, or camera) captured by a `type="file"` input.
+* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete): A string. Specifies one of the possible [autocomplete behaviors.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
+* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autofocus): A boolean. If `true`, React will focus the element on mount.
+* [`dirname`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#dirname): A string. Specifies the form field name for the element's directionality.
+* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled): A boolean. If `true`, the input will not be interactive and will appear dimmed.
+* `children`: `<input>` does not accept children.
+* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form): A string. Specifies the `id` of the `<form>` this input belongs to. If omitted, it's the closest parent form.
+* [`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): A string. Overrides the parent `<form action>` for `type="submit"` and `type="image"`.
+* [`formEnctype`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formenctype): A string. Overrides the parent `<form enctype>` for `type="submit"` and `type="image"`.
+* [`formMethod`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formmethod): A string. Overrides the parent `<form method>` for `type="submit"` and `type="image"`.
+* [`formNoValidate`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formnovalidate): A string. Overrides the parent `<form noValidate>` for `type="submit"` and `type="image"`.
+* [`formTarget`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formtarget): A string. Overrides the parent `<form target>` for `type="submit"` and `type="image"`.
+* [`height`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#height): A string. Specifies the image height for `type="image"`.
+* [`list`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#list): A string. Specifies the `id` of the `<datalist>` with the autocomplete options.
+* [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max): A number. Specifies the maximum value of numerical and datetime inputs.
+* [`maxLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength): A number. Specifies the maximum length of text and other inputs.
+* [`min`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min): A number. Specifies the minimum value of numerical and datetime inputs.
+* [`minLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength): A number. Specifies the minimum length of text and other inputs.
+* [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#multiple): A boolean. Specifies whether multiple values are allowed for `<type="file"` and `type="email"`.
+* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name): A string. Specifies the name for this input that's [submitted with the form.](#reading-the-input-values-when-submitting-a-form)
+* `onChange`: An [`Event` handler](/apis/react-dom/components/common#event-handler) function. Required for [controlled inputs.](#controlling-an-input-with-a-state-variable) Fires immediately when the input's value is changed by the user (for example, it fires on every keystroke). Behaves like the browser [`input` event.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+* `onChangeCapture`: A version of `onChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): An [`Event` handler](/apis/react-dom/components/common#event-handler) function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use `onChange` instead which works similarly.
+* `onInputCapture`: A version of `onInput` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): An [`Event` handler](/apis/react-dom/components/common#event-handler) function. Fires if an input fails validation on form submit. Unlike the built-in `invalid` event, the React `onInvalid` event bubbles.
+* `onInvalidCapture`: A version of `onInvalid` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event): An [`Event` handler](/apis/react-dom/components/common#event-handler) function. Fires after the selection inside the `<input>` changes. React extends the `onSelect` event to also fire for empty selection and on edits (which may affect the selection).
+* `onSelectCapture`: A version of `onSelect` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`pattern`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern): A string. Specifies the pattern that the `value` must match.
+* [`placeholder`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder): A string. Displayed in a dimmed color when the input value is empty.
+* [`readOnly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly): A boolean. If `true`, the input is not editable by the user.
+* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required): A boolean. If `true`, the value must be provided for the form to submit.
+* [`size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#size): A number. Similar to setting width, but the unit depends on the control.
+* [`src`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#src): A string. Specifies the image source for a `type="image"` input.
+* [`step`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step): A positive number or an `'any'` string. Specifies the distance between valid values.
+* [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type): A string. One of the [input types.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types)
+* [`width`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#width):  A string. Specifies the image width for a `type="image"` input.
+
+#### Caveats {/*caveats*/}
+
+- Checkboxes need `checked` (or `defaultChecked`), not `value` (or `defaultValue`).
+- If a text input receives a string `value` prop, it will be [treated as controlled.](#controlling-an-input-with-a-state-variable)
+- If a checkbox or a radio button receives a boolean `checked` prop, it will be [treated as controlled.](#controlling-an-input-with-a-state-variable)
+- An input can't be both controlled and uncontrolled at the same time.
+- An input cannot switch between being controlled or uncontrolled over its lifetime.
+- Every controlled input needs an `onChange` event handler that synchronously updates its backing value.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### My text input doesn't update when I type into it {/*my-text-input-doesnt-update-when-i-type-into-it*/}
+
+If you render an input with `value` but no `onChange`, you will see an error in the console:
+
+```js
+// 🔴 Bug: controlled text input with no onChange handler
+<input value={something} />
+```
+
+<ConsoleBlock level="error">
+
+You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
+
+</ConsoleBlock>
+
+As the error message suggests, if you only wanted to [specify the *initial* value,](#providing-an-initial-value-for-an-input) pass `defaultValue` instead:
+
+```js
+// ✅ Good: uncontrolled input with an initial value
+<input defaultValue={something} />
+```
+
+If you want [to control this input with a state variable,](#controlling-an-input-with-a-state-variable) specify an `onChange` handler:
+
+```js
+// ✅ Good: controlled input with onChange
+<input value={something} onChange={e => setSomething(e.target.value)} />
+```
+
+If the value is intentionally read-only, add a `readOnly` prop to suppress the error:
+
+```js
+// ✅ Good: readonly controlled input without on change
+<input value={something} readOnly={true} />
+```
+
+---
+
+### My checkbox doesn't update when I click on it {/*my-checkbox-doesnt-update-when-i-click-on-it*/}
+
+If you render a checkbox with `checked` but no `onChange`, you will see an error in the console:
+
+```js
+// 🔴 Bug: controlled checkbox with no onChange handler
+<input type="checkbox" checked={something} />
+```
+
+<ConsoleBlock level="error">
+
+You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.
+
+</ConsoleBlock>
+
+As the error message suggests, if you only wanted to [specify the *initial* value,](#providing-an-initial-value-for-an-input) pass `defaultChecked` instead:
+
+```js
+// ✅ Good: uncontrolled checkbox with an initial value
+<input type="checkbox" defaultChecked={something} />
+```
+
+If you want [to control this checkbox with a state variable,](#controlling-an-input-with-a-state-variable) specify an `onChange` handler:
+
+```js
+// ✅ Good: controlled checkbox with onChange
+<input type="checkbox" checked={something} onChange={e => setSomething(e.target.checked)} />
+```
+
+<Pitfall>
+
+You need to read `e.target.checked` rather than `e.target.value` for checkboxes.
+
+</Pitfall>
+
+If the checkbox is intentionally read-only, add a `readOnly` prop to suppress the error:
+
+```js
+// ✅ Good: readonly controlled input without on change
+<input type="checkbox" checked={something} readOnly={true} />
+```
+
+---
+
+### My input caret jumps to the beginning on every keystroke {/*my-input-caret-jumps-to-the-beginning-on-every-keystroke*/}
+
+If you [control an input,](#controlling-an-input-with-a-state-variable) you must update its state variable to the input's value from the DOM during `onChange`.
+
+You can't update it to something other than `e.target.value` (or `e.target.checked` for checkboxes):
+
+```js
+function handleChange(e) {
+  // 🔴 Bug: updating an input to something other than e.target.value
+  setFirstName(e.target.value.toUpperCase());
+}
+```
+
+You also can't update it asynchronously:
+
+```js
+function handleChange(e) {
+  // 🔴 Bug: updating an input asynchronously
+  setTimeout(() => {
+    setFirstName(e.target.value);
+  }, 100);
+}
+```
+
+To fix your code, update it synchronously to `e.target.value`:
+
+```js
+function handleChange(e) {
+  // ✅ Updating a controlled input to e.target.value synchronously
+  setFirstName(e.target.value);
+}
+```
+
+If this doesn't fix the problem, it's possible that the input gets removed and re-added from the DOM on every keystroke. This can happen if you're accidentally [resetting state](/learn/preserving-and-resetting-state) on every re-render. For example, this can happen if the input or one of its parents always receives a different `key` attribute, or if you nest component definitions (which is not allowed in React and causes the "inner" component to always be considered a different tree).
+
+---
+
+### I'm getting an error: "A component is changing an uncontrolled input to be controlled" {/*im-getting-an-error-a-component-is-changing-an-uncontrolled-input-to-be-controlled*/}
+
+
+If you provide a `value` to the component, it must remain a string throughout its lifetime.
+
+You cannot pass `value={undefined}` first and later pass `value="some string"` because React won't know whether you want the component to be uncontrolled or controlled. A controlled component should always receive a string `value`, not `null` or `undefined`.
+
+If your `value` is coming from an API or a state variable, it might be initialized to `null` or `undefined`. In that case, either set it to an empty string (`''`) initially, or pass `value={someValue ?? ''}` to ensure `value` is a string.
+
+Similarly, if you pass `checked` to a checkbox, ensure it's always a boolean.
diff --git a/beta/src/content/apis/react-dom/components/option.md b/beta/src/content/apis/react-dom/components/option.md
new file mode 100644
index 000000000..6f9d2908e
--- /dev/null
+++ b/beta/src/content/apis/react-dom/components/option.md
@@ -0,0 +1,80 @@
+---
+title: "<option>"
+---
+
+<Intro>
+
+The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) lets you render an option inside a [`<select>`](/apis/react-dom/components/select) box.
+
+```js
+<select>
+  <option value="someOption">Some option</option>
+  <option value="otherOption">Other option</option>
+</select>
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Usage {/*usage*/}
+
+### Displaying a select box with options {/*displaying-a-select-box-with-options*/}
+
+Render a `<select>` with a list of `<option>` components inside to display a select box. Give each `<option>` a `value` representing the data to be submitted with the form.
+
+[Read more about displaying a `<select>` with a list of `<option>` components.](/apis/react-dom/components/select)
+
+<Sandpack>
+
+```js
+export default function FruitPicker() {
+  return (
+    <label>
+      Pick a fruit:
+      <select name="selectedFruit">
+        <option value="apple">Apple</option>
+        <option value="banana">Banana</option>
+        <option value="orange">Orange</option>
+      </select>
+    </label>
+  );
+}
+```
+
+```css
+select { margin: 5px; }
+```
+
+</Sandpack>  
+
+---
+
+## Reference {/*reference*/}
+
+### `<option>` {/*option*/}
+
+The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) lets you render an option inside a [`<select>`](/apis/react-dom/components/select) box.
+
+```js
+<select>
+  <option value="someOption">Some option</option>
+  <option value="otherOption">Other option</option>
+</select>
+```
+
+#### Props {/*props*/}
+
+`<option>` supports all [common element props.](/apis/react-dom/components/common#props)
+
+Additionally, `<option>` supports these props:
+
+* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#disabled): A boolean. If `true`, the option will not be selectable and will appear dimmed.
+* [`label`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#label): A string. Specifies the meaning of the option. If not specified, the text inside the option is used.
+* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#value): The value to be used [when submitting the parent `<select>` in a form](/apis/react-dom/components/select#reading-the-select-box-value-when-submitting-a-form) if this option is selected.
+
+#### Caveats {/*caveats*/}
+
+* React does not support the `selected` attribute on `<option>`. Instead, pass this option's `value` to the parent [`<select defaultValue>`](/apis/react-dom/components/select#providing-an-initially-selected-option) for an uncontrolled select box, or [`<select value>`](/apis/react-dom/components/select#controlling-a-select-box-with-a-state-variable) for a controlled select box.
diff --git a/beta/src/content/apis/react-dom/components/progress.md b/beta/src/content/apis/react-dom/components/progress.md
new file mode 100644
index 000000000..729bb474b
--- /dev/null
+++ b/beta/src/content/apis/react-dom/components/progress.md
@@ -0,0 +1,70 @@
+---
+title: "<progress>"
+---
+
+<Intro>
+
+The [built-in browser `<progress>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) lets you render a progress indicator.
+
+```js
+<progress value={0.5} />
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Usage {/*usage*/}
+
+### Controlling a progress indicator {/*controlling-a-progress-indicator*/}
+
+To display a progress indicator, render a `<progress>` component. You can pass a number `value` between `0` and the `max` value you specify. If you don't pass a `max` value, it will assumed to be `1` by default.
+
+If the operation is not ongoing, pass `value={null}` to put the progress indicator into an indeterminate state.
+
+<Sandpack>
+
+```js
+export default function App() {
+  return (
+    <>
+      <progress value={0} />
+      <progress value={0.5} />
+      <progress value={0.7} />
+      <progress value={75} max={100} />
+      <progress value={1} />
+      <progress value={null} />
+    </>
+  );
+}
+```
+
+```css
+progress { display: block; }
+```
+
+</Sandpack>
+
+---
+
+## Reference {/*reference*/}
+
+### `<progress>` {/*progress*/}
+
+To display a progress indicator, render the [built-in browser `<progress>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) component.
+
+```js
+<progress value={0.5} />
+```
+
+#### Props {/*props*/}
+
+`<progress>` supports all [common element props.](/apis/react-dom/components/common#props)
+
+Additionally, `<progress>` supports these props:
+
+* [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-max): A number. Specifies the maximum `value`. Defaults to `1`.
+* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-value): A number between `0` and `max`, or `null` for intermedinate progress. Specifies how much was done.
+
diff --git a/beta/src/content/apis/react-dom/components/select.md b/beta/src/content/apis/react-dom/components/select.md
new file mode 100644
index 000000000..36cbeb6d0
--- /dev/null
+++ b/beta/src/content/apis/react-dom/components/select.md
@@ -0,0 +1,385 @@
+---
+title: "<select>"
+---
+
+<Intro>
+
+The [built-in browser `<select>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) lets you render a select box with options.
+
+```js
+<select>
+  <option value="someOption">Some option</option>
+  <option value="otherOption">Other option</option>
+</select>
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Usage {/*usage*/}
+
+### Displaying a select box with options {/*displaying-a-select-box-with-options*/}
+
+Render a `<select>` with a list of `<option>` components inside to display a select box. Give each `<option>` a `value` representing the data to be submitted with the form.
+
+<Sandpack>
+
+```js
+export default function FruitPicker() {
+  return (
+    <label>
+      Pick a fruit:
+      <select name="selectedFruit">
+        <option value="apple">Apple</option>
+        <option value="banana">Banana</option>
+        <option value="orange">Orange</option>
+      </select>
+    </label>
+  );
+}
+```
+
+```css
+select { margin: 5px; }
+```
+
+</Sandpack>  
+
+---
+
+### Providing a label for a select box {/*providing-a-label-for-a-select-box*/}
+
+Typically, you will place every `<select>` inside a [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) tag. This tells the browser that this label is associated with that select box. When the user clicks the label, the browser will automatically focus the select box. It's also essential for accessibility: a screen reader will announce the label caption when the user focuses the select box.
+
+If you can't nest `<select>` into a `<label>`, associate them by passing the same ID to `<select id>` and [`<label htmlFor>`.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) To avoid conflicts between multiple instances of one component, generate such an ID with [`useId`.](/apis/react/useId)
+
+<Sandpack>
+
+```js
+import { useId } from 'react';
+
+export default function Form() {
+  const vegetableSelectId = useId();
+  return (
+    <>
+      <label>
+        Pick a fruit:
+        <select name="selectedFruit">
+          <option value="apple">Apple</option>
+          <option value="banana">Banana</option>
+          <option value="orange">Orange</option>
+        </select>
+      </label>
+      <hr />
+      <label htmlFor={vegetableSelectId}>
+        Pick a vegetable:
+      </label>
+      <select id={vegetableSelectId} name="selectedVegetable">
+        <option value="cucumber">Cucumber</option>
+        <option value="corn">Corn</option>
+        <option value="tomato">Tomato</option>
+      </select>
+    </>
+  );
+}
+```
+
+```css
+select { margin: 5px; }
+```
+
+</Sandpack>
+
+
+---
+
+### Providing an initially selected option {/*providing-an-initially-selected-option*/}
+
+By default, the browser will select the first `<option>` in the list. To select a different option by default, pass that `<option>`'s `value` as the `defaultValue` to the `<select>` element.
+
+<Sandpack>
+
+```js
+export default function FruitPicker() {
+  return (
+    <label>
+      Pick a fruit:
+      <select name="selectedFruit" defaultValue="orange">
+        <option value="apple">Apple</option>
+        <option value="banana">Banana</option>
+        <option value="orange">Orange</option>
+      </select>
+    </label>
+  );
+}
+```
+
+```css
+select { margin: 5px; }
+```
+
+</Sandpack>  
+
+<Pitfall>
+
+Unlike in HTML, passing a `selected` attribute to an individual `<option>` is not supported.
+
+</Pitfall>
+
+---
+
+### Enabling multiple selection {/*enabling-multiple-selection*/}
+
+Pass `multiple={true}` to the `<select>` to let the user select multiple options. In that case, if you also specify `defaultValue` to choose the initially selected options, it must be an array.
+
+<Sandpack>
+
+```js
+export default function FruitPicker() {
+  return (
+    <label>
+      Pick some fruits:
+      <select
+        name="selectedFruit"
+        defaultValue={['orange', 'banana']}
+        multiple={true}
+      >
+        <option value="apple">Apple</option>
+        <option value="banana">Banana</option>
+        <option value="orange">Orange</option>
+      </select>
+    </label>
+  );
+}
+```
+
+```css
+select { display: block; margin-top: 10px; width: 200px; }
+```
+
+</Sandpack>
+
+---
+
+### Reading the select box value when submitting a form {/*reading-the-select-box-value-when-submitting-a-form*/}
+
+Add a [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) around your textarea with a [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) inside. It will call your `<form onSubmit>` event handler. By default, the browser will send the form data to the current URL and refresh the page. You can override that behavior by calling `e.preventDefault()`. To read the form data, use [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
+<Sandpack>
+
+```js
+export default function EditPost() {
+  function handleSubmit(e) {
+    // Prevent the browser from reloading the page
+    e.preventDefault();
+    // Read the form data
+    const form = e.target;
+    const formData = new FormData(form);
+    // You can pass formData as a fetch body directly:
+    fetch('/some-api', { method: form.method, body: formData });
+    // You can generate a URL out of it, as the browser does by default:
+    console.log(new URLSearchParams(formData).toString());
+    // You can work with it as a plain object.
+    const formJson = Object.fromEntries(formData.entries());
+    console.log(formJson); // (!) This doesn't include multiple select values
+    // Or you can get an array of name-value pairs.
+    console.log([...formData.entries()]);
+  }
+
+  return (
+    <form method="post" onSubmit={handleSubmit}>
+      <label>
+        Pick your favorite fruit:
+        <select name="selectedFruit" defaultValue="orange">
+          <option value="apple">Apple</option>
+          <option value="banana">Banana</option>
+          <option value="orange">Orange</option>
+        </select>
+      </label>
+      <label>
+        Pick all your favorite vegetables:
+        <select
+          name="selectedVegetables"
+          multiple={true}
+          defaultValue={['corn', 'tomato']}
+        >
+          <option value="cucumber">Cucumber</option>
+          <option value="corn">Corn</option>
+          <option value="tomato">Tomato</option>
+        </select>
+      </label>
+      <hr />
+      <button type="reset">Reset</button>
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+```css
+label, select { display: block; }
+label { margin-bottom: 20px; }
+```
+
+</Sandpack>
+
+<Note>
+
+Give a `name` to your `<select>`, for example `<select name="selectedFruit" />`. The `name` you specified will be used as a key in the form data, for example `{ selectedFruit: "orange" }`.
+
+If you use `<select multiple={true}>`, the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) you'll read from the form will include each selected value as a separate name-value pair. Look closely at the console logs in the example above.
+
+</Note>
+
+<Pitfall>
+
+By default, *any* `<button>` inside a `<form>` will submit it. This can be surprising! If you have your own custom `Button` React component, consider returning [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) instead of `<button>`. Then, to be explicit, use `<button type="submit">` for buttons that *are* supposed to submit the form.
+
+</Pitfall>
+
+---
+
+### Controlling a select box with a state variable {/*controlling-a-select-box-with-a-state-variable*/}
+
+A select box like `<select />` is *uncontrolled.* Even if you [pass an initially selected value](#providing-an-initially-selected-option) like `<select defaultValue="orange" />`, your JSX only specifies the initial value, not the value right now.
+
+**To render a _controlled_ select box, pass the `value` prop to it.** React will force the select box to always have the `value` you passed. Typically, you will control a select box by declaring a [state variable:](/apis/react/useState)
+
+```js {2,6,7}
+function FruitPicker() {
+  const [selectedFruit, setSelectedFruit] = useState('orange'); // Declare a state variable...
+  // ...
+  return (
+    <select
+      value={selectedFruit} // ...force the select's value to match the state variable...
+      onChange={e => setSelectedFruit(e.target.value)} // ... and update the state variable on any change!
+    >
+      <option value="apple">Apple</option>
+      <option value="banana">Banana</option>
+      <option value="orange">Orange</option>
+    </select>
+  );
+}
+```
+
+This is useful if you want to re-render some part of the UI in response to every selection.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+export default function FruitPicker() {
+  const [selectedFruit, setSelectedFruit] = useState('orange');
+  const [selectedVegs, setSelectedVegs] = useState(['corn', 'tomato']);
+  return (
+    <>
+      <label>
+        Pick a fruit:
+        <select
+          value={selectedFruit}
+          onChange={e => setSelectedFruit(e.target.value)}
+        >
+          <option value="apple">Apple</option>
+          <option value="banana">Banana</option>
+          <option value="orange">Orange</option>
+        </select>
+      </label>
+      <hr />
+      <label>
+        Pick all your favorite vegetables:
+        <select
+          multiple={true}
+          value={selectedVegs}
+          onChange={e => {
+            const options = [...e.target.selectedOptions];
+            const values = options.map(option => option.value);
+            setSelectedVegs(values);
+          }}
+        >
+          <option value="cucumber">Cucumber</option>
+          <option value="corn">Corn</option>
+          <option value="tomato">Tomato</option>
+        </select>
+      </label>
+      <hr />
+      <p>Your favorite fruit: {selectedFruit}</p>
+      <p>Your favorite vegetables: {selectedVegs.join(', ')}</p>
+    </>
+  );
+}
+```
+
+```css
+select { margin-bottom: 10px; display: block; }
+```
+
+</Sandpack>
+
+<Pitfall>
+
+**If you pass `value` without `onChange`, it will be impossible to select an option.** When you control a select box by passing some `value` to it, you *force* it to always have the value you passed. So if you pass a state variable as a `value` but forget to update that state variable synchronously during the `onChange` event handler, React will revert the select box after every keystroke back to the `value` that you specified.
+
+Unlike in HTML, passing a `selected` attribute to an individual `<option>` is not supported.
+
+</Pitfall>
+
+<hr />
+
+## Reference {/*reference*/}
+
+### `<select>` {/*select*/}
+
+To display a select box, render the [built-in browser `<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) component.
+
+```js
+<select>
+  <option value="someOption">Some option</option>
+  <option value="otherOption">Other option</option>
+</select>
+```
+
+[See more examples above.](#usage)
+
+#### Props {/*props*/}
+
+`<select>` supports all [common element props.](/apis/react-dom/components/common#props)
+
+You can [make a select box controlled](#controlling-a-select-box-with-a-state-variable) by passing a `value` prop:
+
+* `value`: A string (or an array of strings for [`multiple={true}`](#enabling-multiple-selection)). Controls which option is selected. Every value string match the `value` of some `<option>` nested inside the `<select>`.
+
+When you pass `value`, you must also pass an `onChange` handler that updates the passed value.
+
+If your `<select>` is uncontrolled, you may pass the `defaultValue` prop instead:
+
+* `defaultValue`: A string (or an array of strings for [`multiple={true}`](#enabling-multiple-selection)). Specifies [the initially selected option.](#providing-an-initially-selected-option)
+
+These `<select>` props are relevant both for uncontrolled and controlled select boxs:
+
+* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-autocomplete): A string. Specifies one of the possible [autocomplete behaviors.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
+* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-autofocus): A boolean. If `true`, React will focus the element on mount.
+* `children`: `<select>` accepts [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup), and [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) components as children. You can also pass your own components as long as they eventually render one of the allowed components. If you pass your own components that eventually render `<option>` tags, each `<option>` you render must have a `value`.
+* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-disabled): A boolean. If `true`, the select box will not be interactive and will appear dimmed.
+* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-form): A string. Specifies the `id` of the `<form>` this select box belongs to. If omitted, it's the closest parent form.
+* [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple): A boolean. If `true`, the browser allows [multiple selection.](#enabling-multiple-selection)
+* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-name): A string. Specifies the name for this select box that's [submitted with the form.](#reading-the-select-box-value-when-submitting-a-form)
+* `onChange`: An [`Event` handler](/apis/react-dom/components/common#event-handler) function. Required for [controlled select boxes.](#controlling-a-select-box-with-a-state-variable) Fires immediately when the user picks a different option. Behaves like the browser [`input` event.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+* `onChangeCapture`: A version of `onChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): An [`Event` handler](/apis/react-dom/components/common#event-handler) function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use `onChange` instead which works similarly.
+* `onInputCapture`: A version of `onInput` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): An [`Event` handler](/apis/react-dom/components/common#event-handler) function. Fires if an input fails validation on form submit. Unlike the built-in `invalid` event, the React `onInvalid` event bubbles.
+* `onInvalidCapture`: A version of `onInvalid` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required): A boolean. If `true`, the value must be provided for the form to submit.
+* [`size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size): A number. For `multiple={true}` selects, specifies the preferred number of initially visible items.
+
+#### Caveats {/*caveats*/}
+
+- Unlike in HTML, passing a `selected` attribute to `<option>` is not supported. Instead, use [`<select defaultValue>`](#providing-an-initially-selected-option) for uncontrolled select boxes and [`<select value>`](#controlling-a-select-box-with-a-state-variable) for controlled select boxes.
+- If a select box receives a `value` prop, it will be [treated as controlled.](#controlling-a-select-box-with-a-state-variable)
+- A select box can't be both controlled and uncontrolled at the same time.
+- A select box cannot switch between being controlled or uncontrolled over its lifetime.
+- Every controlled select box needs an `onChange` event handler that synchronously updates its backing value.
+
diff --git a/beta/src/content/apis/react-dom/components/textarea.md b/beta/src/content/apis/react-dom/components/textarea.md
new file mode 100644
index 000000000..87aa4c5e7
--- /dev/null
+++ b/beta/src/content/apis/react-dom/components/textarea.md
@@ -0,0 +1,423 @@
+---
+title: "<textarea>"
+---
+
+<Intro>
+
+The [built-in browser `<textarea>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) lets you render a multiline text input.
+
+```js
+<textarea />
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Usage {/*usage*/}
+
+### Displaying a text area {/*displaying-a-text-area*/}
+
+Render `<textarea>` to display a text area. You can specify its default size with the [`rows`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#rows) and [`cols`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#cols) attributes, but by default the user will be able to resize it. To disable resizing, you can specify `resize: none` in the CSS.
+
+<Sandpack>
+
+```js
+export default function NewPost() {
+  return (
+    <label>
+      Write your post:
+      <textarea name="postContent" rows={4} cols={40} />
+    </label>
+  );
+}
+```
+
+```css
+input { margin-left: 5px; }
+textarea { margin-top: 10px; }
+label { margin: 10px; }
+label, textarea { display: block; }
+```
+
+</Sandpack>
+
+---
+
+### Providing a label for a text area {/*providing-a-label-for-a-text-area*/}
+
+Typically, you will place every `<textarea>` inside a [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) tag. This tells the browser that this label is associated with that text area. When the user clicks the label, the browser will focus the text area. It's also essential for accessibility: a screen reader will announce the label caption when the user focuses the text area.
+
+If you can't nest `<textarea>` into a `<label>`, associate them by passing the same ID to `<textarea id>` and [`<label htmlFor>`.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) To avoid conflicts between instances of one component, generate such an ID with [`useId`.](/apis/react/useId)
+
+<Sandpack>
+
+```js
+import { useId } from 'react';
+
+export default function Form() {
+  const postTextAreaId = useId();
+  return (
+    <>
+      <label htmlFor={postTextAreaId}>
+        Write your post:
+      </label>
+      <textarea
+        id={postTextAreaId}
+        name="postContent"
+        rows={4}
+        cols={40}
+      />
+    </>
+  );
+}
+```
+
+```css
+input { margin: 5px; }
+```
+
+</Sandpack>
+
+---
+
+### Providing an initial value for a text area {/*providing-an-initial-value-for-a-text-area*/}
+
+You can optionally specify the initial value for the text area. Pass it as the `defaultValue` string.
+
+<Sandpack>
+
+```js
+export default function EditPost() {
+  return (
+    <label>
+      Edit your post:
+      <textarea
+        name="postContent"
+        defaultValue="I really enjoyed biking yesterday!"
+        rows={4}
+        cols={40}
+      />
+    </label>
+  );
+}
+```
+
+```css
+input { margin-left: 5px; }
+textarea { margin-top: 10px; }
+label { margin: 10px; }
+label, textarea { display: block; }
+```
+
+</Sandpack>
+
+<Pitfall>
+
+Unlike in HTML, passing initial text like `<textarea>Some content</textarea>` is not supported.
+
+</Pitfall>
+
+---
+
+### Reading the text area value when submitting a form {/*reading-the-text-area-value-when-submitting-a-form*/}
+
+Add a [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) around your textarea with a [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) inside. It will call your `<form onSubmit>` event handler. By default, the browser will send the form data to the current URL and refresh the page. You can override that behavior by calling `e.preventDefault()`. To read the form data, use [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
+<Sandpack>
+
+```js
+export default function EditPost() {
+  function handleSubmit(e) {
+    // Prevent the browser from reloading the page
+    e.preventDefault();
+
+    // Read the form data
+    const form = e.target;
+    const formData = new FormData(form);
+
+    // You can pass formData as a fetch body directly:
+    fetch('/some-api', { method: form.method, body: formData });
+
+    // Or you can work with it as a plain object:
+    const formJson = Object.fromEntries(formData.entries());
+    console.log(formJson);
+  }
+
+  return (
+    <form method="post" onSubmit={handleSubmit}>
+      <label>
+        Post title: <input name="postTitle" defaultValue="Biking" />
+      </label>
+      <label>
+        Edit your post:
+        <textarea
+          name="postContent"
+          defaultValue="I really enjoyed biking yesterday!"
+          rows={4}
+          cols={40}
+        />
+      </label>
+      <hr />
+      <button type="reset">Reset edits</button>
+      <button type="submit">Save post</button>
+    </form>
+  );
+}
+```
+
+```css
+label { display: block; }
+input { margin: 5px; }
+```
+
+</Sandpack>
+
+<Note>
+
+Give a `name` to your `<textarea>`, for example `<textarea name="postContent" />`. The `name` you specified will be used as a key in the form data, for example `{ postContent: "Your post" }`.
+
+</Note>
+
+<Pitfall>
+
+By default, *any* `<button>` inside a `<form>` will submit it. This can be surprising! If you have your own custom `Button` React component, consider returning [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) instead of `<button>`. Then, to be explicit, use `<button type="submit">` for buttons that *are* supposed to submit the form.
+
+</Pitfall>
+
+---
+
+### Controlling a text area with a state variable {/*controlling-a-text-area-with-a-state-variable*/}
+
+A text area like `<textarea />` is *uncontrolled.* Even if you [pass an initial value](#providing-an-initial-value-for-a-text-area) like `<textarea defaultValue="Initial text" />`, your JSX only specifies the initial value, not the value right now.
+
+**To render a _controlled_ text area, pass the `value` prop to it.** React will force the text area to always have the `value` you passed. Typically, you will control a text area by declaring a [state variable:](/apis/react/useState)
+
+```js {2,6,7}
+function NewPost() {
+  const [postContent, setPostContent] = useState(''); // Declare a state variable...
+  // ...
+  return (
+    <textarea
+      value={postContent} // ...force the input's value to match the state variable...
+      onChange={e => setPostContent(e.target.value)} // ... and update the state variable on any edits!
+    />
+  );
+}
+```
+
+This is useful if you want to re-render some part of the UI in response to every keystroke.
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+import MarkdownPreview from './MarkdownPreview.js';
+
+export default function MarkdownEditor() {
+  const [postContent, setPostContent] = useState('_Hello,_ **Markdown**!');
+  return (
+    <>
+      <label>
+        Enter some markdown:
+        <textarea
+          value={postContent}
+          onChange={e => setPostContent(e.target.value)}
+        />
+      </label>
+      <hr />
+      <MarkdownPreview markdown={postContent} />
+    </>
+  );
+}
+```
+
+```js MarkdownPreview.js
+import { Remarkable } from 'remarkable';
+
+const md = new Remarkable();
+
+export default function MarkdownPreview({ markdown }) {
+  const renderedHTML = md.render(markdown);
+  return <div dangerouslySetInnerHTML={{__html: renderedHTML}} />;
+}
+```
+
+```json package.json
+{
+  "dependencies": {
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "remarkable": "2.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```css
+textarea { display: block; margin-top: 5px; margin-bottom: 10px; }
+```
+
+</Sandpack>
+
+<Pitfall>
+
+**If you pass `value` without `onChange`, it will be impossible to type into the text area.** When you control an text area by passing some `value` to it, you *force* it to always have the value you passed. So if you pass a state variable as a `value` but forget to update that state variable synchronously during the `onChange` event handler, React will revert the text area after every keystroke back to the `value` that you specified.
+
+</Pitfall>
+
+---
+
+## Reference {/*reference*/}
+
+### `<textarea>` {/*textarea*/}
+
+To display a text area, render the [built-in browser `<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) component.
+
+```js
+<textarea name="postContent" />
+```
+
+[See more examples above.](#usage)
+
+#### Props {/*props*/}
+
+`<textarea>` supports all [common element props.](/apis/react-dom/components/common#props)
+
+You can [make a text area controlled](#controlling-a-text-area-with-a-state-variable) by passing a `value` prop:
+
+* `value`: A string. Controls the text inside the text area.
+
+When you pass `value`, you must also pass an `onChange` handler that updates the passed value.
+
+If your `<textarea>` is uncontrolled, you may pass the `defaultValue` prop instead:
+
+* `defaultValue`: A string. Specifies [the initial value](#providing-an-initial-value-for-a-text-area) for a text area.
+
+These `<textarea>` props are relevant both for uncontrolled and controlled text areas:
+
+* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autocomplete): Either `'on'` or `'off'`. Specifies the autocomplete behavior.
+* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autofocus): A boolean. If `true`, React will focus the element on mount.
+* `children`: `<textarea>` does not accept children. To set the initial value, use `defaultValue`.
+* [`cols`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols): A number. Specifies the default width in average character widths. Defaults to `20`.
+* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-disabled): A boolean. If `true`, the input will not be interactive and will appear dimmed.
+* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-form): A string. Specifies the `id` of the `<form>` this input belongs to. If omitted, it's the closest parent form.
+* [`maxLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength): A number. Specifies the maximum length of text.
+* [`minLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-minlength): A number. Specifies the minimum length of text.
+* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name): A string. Specifies the name for this input that's [submitted with the form.](#reading-the-textarea-value-when-submitting-a-form)
+* `onChange`: An [`Event` handler](/apis/react-dom/components/common#event-handler) function. Required for [controlled text areas.](#controlling-a-text-area-with-a-state-variable) Fires immediately when the input's value is changed by the user (for example, it fires on every keystroke). Behaves like the browser [`input` event.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+* `onChangeCapture`: A version of `onChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): An [`Event` handler](/apis/react-dom/components/common#event-handler) function. function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use `onChange` instead which works similarly.
+* `onInputCapture`: A version of `onInput` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): An [`Event` handler](/apis/react-dom/components/common#event-handler) function. Fires if an input fails validation on form submit. Unlike the built-in `invalid` event, the React `onInvalid` event bubbles.
+* `onInvalidCapture`: A version of `onInvalid` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/select_event): An [`Event` handler](/apis/react-dom/components/common#event-handler) function. Fires after the selection inside the `<textarea>` changes. React extends the `onSelect` event to also fire for empty selection and on edits (which may affect the selection).
+* `onSelectCapture`: A version of `onSelect` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`placeholder`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder): A string. Displayed in a dimmed color when the text area value is empty.
+* [`readOnly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-readonly): A boolean. If `true`, the text area is not editable by the user.
+* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-required): A boolean. If `true`, the value must be provided for the form to submit.
+* [`rows`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows): A number. Specifies the default height in average character heights. Defaults to `2`.
+* [`wrap`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-wrap): Either `'hard'`, `'soft'`, or `'off'`. Specifies how the text should be wrapped when submitting a form.
+
+#### Caveats {/*caveats*/}
+
+- Passing children like `<textarea>something</textarea>` is not allowed. [Use `defaultValue` for initial content.](#providing-an-initial-value-for-a-text-area)
+- If a text area receives a string `value` prop, it will be [treated as controlled.](#controlling-a-text-area-with-a-state-variable)
+- A text area can't be both controlled and uncontrolled at the same time.
+- A text area cannot switch between being controlled or uncontrolled over its lifetime.
+- Every controlled text area needs an `onChange` event handler that synchronously updates its backing value.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### My text area doesn't update when I type into it {/*my-text-area-doesnt-update-when-i-type-into-it*/}
+
+If you render a text area with `value` but no `onChange`, you will see an error in the console:
+
+```js
+// 🔴 Bug: controlled text area with no onChange handler
+<textarea value={something} />
+```
+
+<ConsoleBlock level="error">
+
+You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
+
+</ConsoleBlock>
+
+As the error message suggests, if you only wanted to [specify the *initial* value,](#providing-an-initial-value-for-a-text-area) pass `defaultValue` instead:
+
+```js
+// ✅ Good: uncontrolled text area with an initial value
+<textarea defaultValue={something} />
+```
+
+If you want [to control this text area with a state variable,](#controlling-a-text-area-with-a-state-variable) specify an `onChange` handler:
+
+```js
+// ✅ Good: controlled text area with onChange
+<textarea value={something} onChange={e => setSomething(e.target.value)} />
+```
+
+If the value is intentionally read-only, add a `readOnly` prop to suppress the error:
+
+```js
+// ✅ Good: readonly controlled text area without on change
+<textarea value={something} readOnly={true} />
+```
+
+---
+
+### My text area caret jumps to the beginning on every keystroke {/*my-text-area-caret-jumps-to-the-beginning-on-every-keystroke*/}
+
+If you [control a text area,](#controlling-a-text-area-with-a-state-variable) you must update its state variable to the text area's value from the DOM during `onChange`.
+
+You can't update it to something other than `e.target.value`:
+
+```js
+function handleChange(e) {
+  // 🔴 Bug: updating an input to something other than e.target.value
+  setFirstName(e.target.value.toUpperCase());
+}
+```
+
+You also can't update it asynchronously:
+
+```js
+function handleChange(e) {
+  // 🔴 Bug: updating an input asynchronously
+  setTimeout(() => {
+    setFirstName(e.target.value);
+  }, 100);
+}
+```
+
+To fix your code, update it synchronously to `e.target.value`:
+
+```js
+function handleChange(e) {
+  // ✅ Updating a controlled input to e.target.value synchronously
+  setFirstName(e.target.value);
+}
+```
+
+If this doesn't fix the problem, it's possible that the text area gets removed and re-added from the DOM on every keystroke. This can happen if you're accidentally [resetting state](/learn/preserving-and-resetting-state) on every re-render. For example, this can happen if the text area or one of its parents always receives a different `key` attribute, or if you nest component definitions (which is not allowed in React and causes the "inner" component to remount on every render).
+
+---
+
+### I'm getting an error: "A component is changing an uncontrolled input to be controlled" {/*im-getting-an-error-a-component-is-changing-an-uncontrolled-input-to-be-controlled*/}
+
+
+If you provide a `value` to the component, it must remain a string throughout its lifetime.
+
+You cannot pass `value={undefined}` first and later pass `value="some string"` because React won't know whether you want the component to be uncontrolled or controlled. A controlled component should always receive a string `value`, not `null` or `undefined`.
+
+If your `value` is coming from an API or a state variable, it might be initialized to `null` or `undefined`. In that case, either set it to an empty string (`''`) initially, or pass `value={someValue ?? ''}` to ensure `value` is a string.
diff --git a/beta/src/content/learn/manipulating-the-dom-with-refs.md b/beta/src/content/learn/manipulating-the-dom-with-refs.md
index f3fe7d05b..13b94b7dd 100644
--- a/beta/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/beta/src/content/learn/manipulating-the-dom-with-refs.md
@@ -211,7 +211,7 @@ This is because **Hooks must only be called at the top-level of your component.*
 
 One possible way around this is to get a single ref to their parent element, and then use DOM manipulation methods like [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to "find" the individual child nodes from it. However, this is brittle and can break if your DOM structure changes.
 
-Another solution is to **pass a function to the `ref` attribute.** This is called a "ref callback". React will call your ref callback with the DOM node when it's time to set the ref, and with `null` when it's time to clear it. This lets you maintain your own array or a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), and access any ref by its index or some kind of ID.
+Another solution is to **pass a function to the `ref` attribute.** This is called a [`ref` callback.](/apis/react-dom/components/common#ref-callback) React will call your ref callback with the DOM node when it's time to set the ref, and with `null` when it's time to clear it. This lets you maintain your own array or a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), and access any ref by its index or some kind of ID.
 
 This example shows how you can use this approach to scroll to an arbitrary node in a long list:
 
@@ -318,7 +318,7 @@ li {
 
 </Sandpack>
 
-In this example, `itemsRef` doesn't hold a single DOM node. Instead, it holds a [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map) from item ID to a DOM node. ([Refs can hold any values!](/learn/referencing-values-with-refs)) The `ref` callback on every list item takes care to update the Map:
+In this example, `itemsRef` doesn't hold a single DOM node. Instead, it holds a [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map) from item ID to a DOM node. ([Refs can hold any values!](/learn/referencing-values-with-refs)) The [`ref` callback](/apis/react-dom/components/common#ref-callback) on every list item takes care to update the Map:
 
 ```js
 <li
diff --git a/beta/src/sidebarAPIs.json b/beta/src/sidebarAPIs.json
index 1834832a2..b9f03af1c 100644
--- a/beta/src/sidebarAPIs.json
+++ b/beta/src/sidebarAPIs.json
@@ -122,7 +122,38 @@
           ]
         },
         {
-          "title": "react-dom",
+          "title": "react-dom: Components",
+          "path": "/apis/react-dom/components",
+          "hasSeparator": true,
+          "routes": [
+            {
+              "title": "Common (e.g. <div>)",
+              "path": "/apis/react-dom/components/common"
+            },
+            {
+              "title": "<input>",
+              "path": "/apis/react-dom/components/input"
+            },
+            {
+              "title": "<option>",
+              "path": "/apis/react-dom/components/option"
+            },
+            {
+              "title": "<progress>",
+              "path": "/apis/react-dom/components/progress"
+            },
+            {
+              "title": "<select>",
+              "path": "/apis/react-dom/components/select"
+            },
+            {
+              "title": "<textarea>",
+              "path": "/apis/react-dom/components/textarea"
+            }
+          ]
+        },
+        {
+          "title": "react-dom: APIs",
           "path": "/apis/react-dom",
           "routes": [
             {