Text Input

Text Input is a UI element that lets users input single line text.

index.tsx

'use client';
import * as React from 'react';
import { TextInput as TextInputPrimitive } from '@base-ui-components/react/text-input';
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-components/react

Once you have the package installed, import the component.

import { TextInput } from '@base-ui-components/react/text-input';

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.

Edit this page on GitHub

Tabs

Tooltip

Getting started

Components

How-to guides

Text Input

Installation

Anatomy

API Reference

TextInput

Contents