Skip to content
Docs
Components
Forms
Input

Input

The Input component is a text field used to get input from the user.

Imports

import {
  Input,
  InputBase,
  InputPrefix,
  InputSuffix,
  useInputProps,
  useInputState,
  InputWrapper,
} from "@adaptui/react-tailwind";
💡

A complex component that supports customization as per the composition guide.

Usage

Input Variants

Variants can be set using the variant prop. The default variant is outline. The available variants are: outline subtle underline & ghost

Input sizes

Sizes can be set using the size prop. The default size is md. The available sizes are: sm md lg xl

Input Prefix/Suffix

You can append or prepend any element inside Input. By default we don't give spacing to the elements so you have to add spacing as needed.

Prefix is positioned absolutely within the input.

API Reference

Prop

Type

Default

sizeunionmd
variantunionoutline
disabledbooleanfalse
invalidbooleanfalse
loadingbooleanfalse
prefixReact.ReactNode-
suffixReact.ReactNode-
spinnerReact.ReactNode-
Last updated on June 8, 2023