Input Form ✨

Versatile text input components with labels, tooltips, icons, validation states, and more. Built for forms and user input.

Input Types

Various input field configurations with labels, tooltips, icons, and validation

Mandatory (not label)*
%
$
Supporting text goes here!

Input Sizes

Three size variants: small, default, and large

Input States

Disabled, error, success, and clearable input states

Sounds good!

Basic Text Input

Simple text input component without the field wrapper

Props Reference

PropTypeDescription
idstringUnique identifier for the input field
labelstring | ReactNodeLabel text for the input field
placeholderstringPlaceholder text
typestringInput type (text, password, search, email, etc.)
requiredbooleanMark field as required
disabledbooleanDisable the input field
hintstringTooltip hint text
messagestringSupporting text below the input
invalidMessagestringError message to display
iconReactNodeIcon element to display inside input
valueHintstringSuffix text (e.g., "%", "$")
clearButtonbooleanShow clear button
inputClassNamestringCustom CSS classes for input element