Text Input
Text Input is a UI element that lets users input single line text.
'use client';
import * as React from 'react';
import { TextInput as TextInputPrimitive } from '@base_ui/react/TextInput';
import { styled } from '@mui/system';
export default function TextFieldIntroduction() {
return <TextInput />;
}
const TextInput = styled(TextInputPrimitive)`
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px;
font-size: 16px;
width: 200px;
&:focus {
outline: 0;
border-color: #0070f3;
}
`;
Installation
Base UI components are all available as a single package.
npm install @base_ui/react
Once you have the package installed, import the component.
import { TextInput } from '@base_ui/react/TextInput';
Anatomy
<TextInput /> renders an <input>, enhanced with field context when placed inside a Field.
<TextInput />API Reference
TextInput
| Prop | Type | Default | Description |
|---|---|---|---|
className | union | Class names applied to the element or a function that returns them based on the component's state. | |
render | union | A function to customize rendering of the component. |