Input

Inputs allow user to enter, edit and submit information across the product.

With label and hint

Basic Input(Optional)

This is a hint text to help user

With icon

Size

Affix

@gmail.com

https://

€

With keyboard display

⌘Command SS

Password

This is a hint text to help user

Password with requirement

Password

Must contain at least

Not met: At least 1 uppercase
Met: At least 1 number
Not met: At least 1 symbol
Met: At least 8 characters

Error

Username

This is a hint text to help user

Card

Card number

Counter

Amount

Inline Selector

With button

Label

Inline

API References

PropTypeDefault

label / hint

ReactNode

—

size

"sm""md""lg"

"md"

leftIcon / rightIcon

ComponentType<IconProps>

—

showShortcut / shortcutKeys / shortcutStyle

boolean / string[] / "inline" | "keys"

false

error / disabled

boolean

false

PropTypeDefault

AffixInput: variant

"suffix""prefix""inlinePrefix"

"suffix"

AffixInput: affix

ReactNode

—

InputWithButton: buttonLabel

string

"Copy"

InputWithButton: leftIcon / buttonIcon / onButtonClick

—

CounterInput: value / onChange / min / max / step

number

—

PropTypeDefault

PasswordInput: showForgotPassword / onForgotPassword

—

false

PasswordInput: showRequirements

boolean

true

CardNumberInput: value / onChange

string

—

PropTypeDefault

CurrencyInput: currencies

CurrencyOption[]

—

PhoneNumberInput: countries

CountryCodeOption[]

—

InlineSelectorInput: selectorOptions / selectorValue / onSelectorChange

DropdownOption[]

—

DateInput: value / onChange / minDate / maxDate

Date

—

PropTypeDefault

TagsInput: tags / onRemoveTag

string[] / (tag: string) => void

—

CounterInput: aria-label

string

"Quantity"

InlineInput: value / onChange

string

—