Loading...
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
Built with:
Respects user system settings, and also could be disabled with reduceMotion prop.
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:
The following native text-based input types are supported:
Their functionality and customization options are limited by the browser API, so it may be better to use dedicated components instead:
NumberInputTelInputSearchInput| Prop | Type | Default |
|---|---|---|
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: