Input

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

index.tsx

'use client';
import * as React from 'react';
import { Input as InputPrimitive } from '@base-ui-components/react/input';
import { styled } from '@mui/system';

export default function InputIntroduction() {
  return <Input />;
}

const Input = styled(InputPrimitive)`
  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 { Input } from '@base-ui-components/react/input';

Anatomy

<Input /> renders an <input>, enhanced with field context when placed inside a Field.

<Input />

API Reference

Input

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

Form

Getting started

Components

How-to guides

Input

Installation

Anatomy

API Reference

Input

Contents