Input

Displays a form input field or a component that looks like an input field.

Usage

Input supports 4 variants: flat, bordered (default), faded and underlined.

Flat

Bordered

Faded

Underlined

Small

Medium

Large

None

Small

Medium

Large

Full

Inside

Outside

Outside Left

Price

We'll never share your email with anyone else.

Please enter a valid email

Value:

Prop	Type	Default	Description
variant	"flat" \| "bordered" \| "faded" \| "underlined"	"bordered"	The variant of the input.
color	"default" \| "primary" \| "secondary" \| "success" \| "warning" \| "danger"	"default"	The color of the input.
size	"sm" \| "md" \| "lg"	"md"	The size of the input.
radius	"none" \| "sm" \| "md" \| "lg" \| "full"	"md"	The radius of the input.
label	ReactNode	-	The content to display as the label.
value	string	-	The current value of the input.
defaultValue	string	-	The default value of the input.
placeholder	string	-	The placeholder of the input.
description	ReactNode	-	The description of the input.
errorMessage	ReactNode	-	The error message of the input.
startContent	ReactNode	-	Element to be rendered at the start of the input.
endContent	ReactNode	-	Element to be rendered at the end of the input.
labelPlacement	"inside" \| "outside" \| "outside-left"	"outside"	The position of the label.
fullWidth	boolean	true	Whether the input should take up the full width of its container.
isClearable	boolean	false	Whether the input should have a clear button.
isInvalid	boolean	false	Whether the input is invalid.
isDisabled	boolean	false	Whether the input is disabled.
isReadOnly	boolean	false	Whether the input is read-only.

Event	Type	Description
onValueChange	(value: string) => void	Handler that is called when the value changes.
onClear	() => void	Handler that is called when the clear button is clicked.