Input

A fully accessible text input field with floating label animation, validation, clearable functionality, and read-only support. Features comprehensive ARIA attributes, keyboard navigation and click-to-focus UX.

Import

Usage

Variants

Flat

Bordered

Underlined

Sizes

Small input

Medium input

Large input

Radius

Small radius

Medium radius

Large radius

With Placeholder

With Label

Password

Username

Label Placement

Inside (default)

Outside

Outside Left

Required Fields

Email*

Password*

Username*

With Start/End Content

Password

Price

USD

Clearable

Username

With callback

With Description

We'll never share your email with anyone else.

Username

Your username must be 3-20 characters long.

Error State

Please enter a valid email address.

Password

Password must be at least 8 characters.

Username

Username is too short.

Read-Only

Username

API Key

This API key is read-only

Account ID

Disabled

Username

Data Attributes

-
data-slot="input-base"Main container element
-
data-slot="input-wrapper"Wrapper around the input (clickable area)
-
data-slot="inner-wrapper"Inner wrapper containing start content, input, and end content
-
data-slot="input"The actual input element
-
data-slot="label"Label element (floating or static)
-
data-slot="start-content"Container for start content (e.g., icons)
-
data-slot="end-content"Container for end content (e.g., icons)
-
data-slot="clear-button"Clear button element (shown when isClearable is true)
-
data-slot="helper-wrapper"Wrapper for description and error messages
-
data-slot="description"Helper text element
-
data-slot="error-message"Error message element
-
data-slot="notched-outline"Fieldset element for bordered variant with inside label (creates the notch around the floating label)
-
data-focus="true"Applied to input-wrapper when input is focused
-
data-readonly="true"Applied to input-wrapper when input is read-only

Accessibility

Keyboard Support

-
TabMoves focus to or away from the input
-
EscapeClears the input when isClearable is true
-
Click (anywhere in wrapper)Focuses the input element

ARIA Attributes

-
aria-invalidSet to true when isInvalid prop is true
-
aria-requiredSet to true when isRequired prop is true
-
aria-describedbyLinks to description or error message for screen reader context
-
aria-liveSet to "polite" on error messages for real-time announcements
-
roleSet to "alert" on error messages for accessibility
-
htmlForLabel properly associated with input via unique ID

Input Props

Attribute	Type	Default	Description
id	string	auto-generated	Custom ID for the input element. Auto-generated using React.useId() if not provided.
ref	React.Ref<HTMLInputElement>	-	Ref forwarding to access the underlying input element directly.
variant	'flat' \| 'bordered' \| 'underlined'	'flat'	The visual style variant of the input.
size	'sm' \| 'md' \| 'lg'	'md'	The size of the input.
radius	'sm' \| 'md' \| 'lg'	'md'	The border radius of the input.
label	string	-	The label text. With placeholder or start/end content: label always floats at the top. Without these: label sits in input like placeholder, floats up when focused or has value.
labelPlacement	'inside' \| 'outside' \| 'outside-left'	'inside'	Position of the label. 'inside' floats within the input, 'outside' places it above, 'outside-left' places it to the left.
isRequired	boolean	false	Whether the input is required (shows asterisk).
startContent	ReactNode	-	Content to display at the start of the input (e.g., icons).
endContent	ReactNode	-	Content to display at the end of the input (e.g., icons).
description	string	-	Helper text displayed below the input.
errorMessage	string	-	Error message displayed when isInvalid is true.
isInvalid	boolean	false	Whether the input is in an error state.
type	string	'text'	The type of input (text, email, password, etc.).
placeholder	string	-	Placeholder text for the input.
disabled	boolean	false	Whether the input is disabled.
isClearable	boolean	false	Whether to show a clear button when the input has a value.
isReadOnly	boolean	false	Whether the input is read-only (can be focused but not edited).
onClear	() => void	-	Callback fired when the input is cleared via the clear button or ESC key.
value	string	-	The controlled value of the input.
defaultValue	string	-	The default value for uncontrolled inputs.
onChange	(event: ChangeEvent<HTMLInputElement>) => void	-	Callback when the input value changes.
onFocus	(event: FocusEvent<HTMLInputElement>) => void	-	Callback when the input receives focus.
onBlur	(event: FocusEvent<HTMLInputElement>) => void	-	Callback when the input loses focus.
className	string	-	Additional CSS classes for styling.