Input

The input component supports various types of input, including text, numbers, passwords, etc., and can add prefix/suffix icons and text.

Usage Examples

The most basic input usage, suitable for most text input scenarios.

300px

Use different types of input by setting the type property, such as email, password, number, date, etc.

300px

Change the input size by setting the size property: sm, md (default), lg.

300px

Input supports multiple states: disabled, readonly, required, and error states.

300px

Add icons before and after the input through prefix-icon and suffix-icon properties.

300px

Property	Basic component module for translation keys shared across all component documentation pages	Type	Default
type	Input type (text, email, password, number, etc.)	string	text
size	Input size	string	md
label	Input label	string
placeholder	Placeholder text	string
disabled	Whether disabled	boolean	false
readonly	Whether readonly	boolean	false
required	Whether required	boolean	false
error	Error message	string
prefix-icon	Prefix icon	string
suffix-icon	Suffix icon	string
help-text	Help text	string

Design Empowers, Innovation Unlimited