Skip to main content
A native input element that automatically works with Field.

​
Import

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

​
Basic Usage

<Input placeholder="Enter your name" />

​
Key Features

  • Seamless integration with Field component
  • Controlled and uncontrolled modes
  • Full native input element support
  • Automatic validation integration
  • Custom value change handler

​
Key Props

​
value

Type: string The value of the input. Use with onValueChange for controlled mode. 
const [value, setValue] = React.useState('');

<Input value={value} onValueChange={setValue} />

​
defaultValue

Type: string The default value of the input. Use for uncontrolled mode. 
<Input defaultValue="Initial value" />

​
onValueChange

Type: (value: string, eventDetails: ChangeEventDetails) => void Callback fired when the value changes. 
<Input onValueChange={(value) => console.log('New value:', value)} />

​
All Native Input Props

The Input component accepts all standard HTML input attributes:
  • type - Input type (text, email, password, etc.)
  • placeholder - Placeholder text
  • disabled - Whether the input is disabled
  • required - Whether the input is required
  • maxLength - Maximum length
  • And all other native input props

​
Styling

<Input 
  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
  placeholder="Enter text"
/>

​
Common Patterns

​
With Field Component

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

<Field.Root>
  <Field.Label>Email</Field.Label>
  <Input type="email" name="email" placeholder="you@example.com" />
  <Field.Error />
</Field.Root>

​
Different Input Types

function InputTypes() {
  return (
    <div className="space-y-4">
      <Input type="text" placeholder="Text input" />
      <Input type="email" placeholder="Email input" />
      <Input type="password" placeholder="Password input" />
      <Input type="number" placeholder="Number input" />
      <Input type="tel" placeholder="Phone number" />
      <Input type="url" placeholder="URL" />
    </div>
  );
}

​
With Icons

function InputWithIcon() {
  return (
    <div className="relative">
      <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400">
        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
      </svg>
      <Input className="pl-10" placeholder="Search..." />
    </div>
  );
}

​
Controlled with Validation

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

function ValidatedInput() {
  const [value, setValue] = React.useState('');

  return (
    <Field.Root name="username" validationMode="onChange">
      <Field.Label>Username</Field.Label>
      <Input 
        value={value} 
        onValueChange={setValue}
        placeholder="Enter username"
      />
      <Field.Error />
    </Field.Root>
  );
}

​
With Character Count

function InputWithCount() {
  const [value, setValue] = React.useState('');
  const maxLength = 100;

  return (
    <div>
      <Input
        value={value}
        onValueChange={setValue}
        maxLength={maxLength}
        placeholder="Enter description"
      />
      <div className="text-sm text-gray-500 mt-1">
        {value.length}/{maxLength}
      </div>
    </div>
  );
}