Input
Input components are used for collecting user provided information. They can be used for text,
numbers, passwords, emails, and more.
You can add a placeholder to an input by setting the placeholder property. The placeholder
text will be displayed until the user enters a value.
Inputs can have different types. The default type is
text
. You can change the
type by setting the type property to
email
,
number
,
password
,
search
,
tel
, or
url
.
You can change the size of an input by setting the size property to
sm
,
md
, or
lg
.
Set the disabled boolean property on an input to give it a grayed out appearance, remove
pointer events, and prevent focusing.
Set the readonly boolean property on an input to prevent modification of the input’s value.
readonly inputs can still be focused and selected, while disabled inputs cannot.
You can set the
valid
or
invalid
boolean properties to apply the valid
or invalid state to an input.
Set
borderRounded
or
borderFlush
boolean properties to apply rounded
borders or remove the borders.
You can use the
mask
property to apply a mask to an input. You can also use the
maskOptions
property to configure the mask. For more information about the mask options, see the
Inputmask documentation.