Input

A native input element that automatically works with Field.

import * as React from 'react';
import { Input } from '@base-ui-components/react/input';
import styles from './index.module.css';

export default function ExampleInput() {
  return <Input placeholder="Name" className={styles.Input} />;
}

API reference

Import the component and use it as a single part:

Anatomy

import { Input } from '@base-ui-components/react/input';

<Input />

Prop	Type	Default
`className`	`string \| ((state: State) => string)`	`undefined`
`render`	`\| ReactElement \| ((props: GenericHTMLProps, state: State) => ReactElement)`	`undefined`

Attribute	Description
`data-disabled`	Present when the input is disabled.
`data-valid`	Present when the input is in valid state.
`data-invalid`	Present when the input is in invalid state.
`data-dirty`	Present when the input's value has changed.
`data-touched`	Present when the input has been touched.
`data-filled`	Present when the input is filled.
`data-focused`	Present when the input is focused.