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.