Input

Component captures user text input and used to create interactive single-line controls for web-based forms.

  • A wrapper around native HTML <input>, supports all HTMLInputElement properties, methods and events

  • Multiple sizes and border radiuses

  • Handles invalid appearance

  • Respects reduce motion with system settings and through props

Installation

Loading...

Usage

<Input />

Examples

Size

Radius

Reduce Motion

Respects user system settings, and also could be disabled with reduceMotion prop.

Validation

There’s an additional InputField component built specifically for easy and clean isomorphic form validation. It leverages Conform and Zod, providing a single source of truth for both frontend and backend while preserving native browser validation APIs (Conform works with any valid HTML form and captures form values using the FormData Web API). It also seamlessly integrates with the latest React 19 useActionState hook:

Types

The following native text-based input types are supported:

  • text
  • email
  • password
  • search
  • tel
  • url

Their functionality and customization options are limited by the browser API, so it may be better to use dedicated components instead:

  • NumberInput
  • TelInput
  • SearchInput

API Reference

PropTypeDefault
type
enum
"text"
size
enum
"default"
radius
enum
invalid
boolean
reduceMotion
boolean
false

Input component is a wrapper around native HTML <Input>, it supports all HTMLInputElement properties, methods and events.

Useful links: