Skip to main content

React DOM Components

React supports all of the browser built-in HTML and SVG components.

Common components ​

All of the built-in browser components support some props and events.

This includes React-specific props like ref and dangerouslySetInnerHTML.

Form components ​

These built-in browser components accept user input:

They are special in React because passing the value prop to them makes them controlled.

Resource and Metadata Components ​

These bulit-in browser components let you load external resources or annotate the document with metadata:

They are special in React because React can render them into the document head, suspend while resources are loading, and enact other behaviors that are described on the reference page for each specific component.

All HTML components ​

React supports all built-in browser HTML components. This includes:

Similar to the DOM standard, 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.

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. 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 attribute, it will also be treated as a custom element.

A future version of React will include more comprehensive support for custom elements.

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.

All SVG components ​

React supports all built-in browser SVG components. This includes:

Similar to the DOM standard, 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.

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.