Input

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

Tab Title
Tab Title

<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"
/>

<Input className={styles.input} placeholder="Enter text" />

.input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
}

.input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input:disabled {
  background-color: #f3f4f6;
  cursor: not-allowed;
}

.input[data-invalid] {
  border-color: #ef4444;
}

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>
  );
}

Getting Started

Handbook

Inputs

Data Display

Navigation

Overlays

Forms

Layout

Utilities

Import

Basic Usage

Key Features

Key Props

value

defaultValue

onValueChange

All Native Input Props

Styling

Common Patterns

With Field Component

Different Input Types

With Icons

Controlled with Validation

With Character Count

​Import

​Basic Usage

​Key Features

​Key Props

​value

​defaultValue

​onValueChange

​All Native Input Props

​Styling

​Common Patterns

​With Field Component

​Different Input Types

​With Icons

​Controlled with Validation

​With Character Count

Import

Basic Usage

Key Features

Key Props

value

defaultValue

onValueChange

All Native Input Props

Styling

Common Patterns

With Field Component

Different Input Types

With Icons

Controlled with Validation

With Character Count