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) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Attribute	Type
`data-dirty`	Empty attribute
`data-disabled`	Empty attribute
`data-invalid`	Empty attribute
`data-touched`	Empty attribute
`data-valid`	Empty attribute