> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/mui/base-ui/llms.txt
> Use this file to discover all available pages before exploring further.

# Input

> A native input element that automatically works with Field.

A native input element that automatically works with Field.

## Import

```jsx theme={null}
import { Input } from '@base-ui/react/input';
```

## Basic Usage

```jsx theme={null}
<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.

```jsx theme={null}
const [value, setValue] = React.useState('');

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

### defaultValue

**Type:** `string`

The default value of the input. Use for uncontrolled mode.

```jsx theme={null}
<Input defaultValue="Initial value" />
```

### onValueChange

**Type:** `(value: string, eventDetails: ChangeEventDetails) => void`

Callback fired when the value changes.

```jsx theme={null}
<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

<Tabs items={['Tailwind CSS', 'CSS Modules']}>
  <Tab value="Tailwind CSS">
    ```jsx theme={null}
    <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"
    />
    ```
  </Tab>

  <Tab value="CSS Modules">
    ```jsx theme={null}
    <Input className={styles.input} placeholder="Enter text" />
    ```

    ```css theme={null}
    .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;
    }
    ```
  </Tab>
</Tabs>

## Common Patterns

### With Field Component

```jsx theme={null}
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

```jsx theme={null}
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

```jsx theme={null}
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

```jsx theme={null}
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

```jsx theme={null}
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>
  );
}
```