Input

Overview

Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. In this component, a prefix, placeholder text, suffix, trailing icon, and descriptive text can be hidden or revealed depending on what is needed.

Demo

Select Variant

Props

Property	Description	Type	Values	Default	Required
label	The Label for the input	string	string		✓
hideLabel	Hide the label	boolean \| undefined	boolean \| undefined
name	The name for the input	string \| undefined	string \| undefined
type	The input type	string \| undefined	string \| undefined	"text"
descriptiveText	Some additional descriptive text	string \| undefined	string \| undefined
placeholder	The input placeholder	string \| undefined	string \| undefined
disabled	Disable the input	boolean \| undefined	boolean \| undefined
error	Displays an error message	string \| undefined	string \| undefined
success	Indicate that something with the field has been successful. Not every field will have this, it should only be used in special situations.	boolean \| undefined	boolean \| undefined
required	Make the input required	boolean \| undefined	boolean \| undefined
pattern	The input pattern	string \| undefined	string \| undefined
readonly	Make the input readonly	boolean \| undefined	boolean \| undefined
wrapperClass	Add a class to the input wrap	string \| string[] \| undefined	string \| string[] \| undefined
cols	The cols for a textarea	number \| undefined	number \| undefined	35
rows	The rows for a textarea	number \| undefined	number \| undefined	4
modelValue		string \| number \| null \| undefined	string \| number \| null \| undefined

Events

Name	Return Type
update:modelValue	[value: string \| number \| null \| undefined]