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.
A native input element that automatically works with Field.
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
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 textdisabled - Whether the input is disabledrequired - Whether the input is requiredmaxLength - 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"
/>
<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>
);
}