Text input

Allow user to enter a single text in a form. They are mainly use for polls or gather information.

Code


                                                        
                                                        
                                                            <PyxisTextInput
                                                            v-model="modelValue"
                                                            placeholder="Text input"
                                                            id="text-input-id"
                                                            data-testid="text-input"
                                                        
                                                        />

Example of a TextInput component

Props

The TextInput component supports the following props

Name	Type	Default	Required
v-model	string \| undefined	undefined	true
id	string	undefined	true
dataTestid	string	undefined	true
type	'text' \| 'password'	'text'	false
label	string	undefined	false
labelTooltip	string	undefined	false
placeholder	string	undefined	false
disabled	boolean	false	false
message	string	undefined	false
readonly	boolean	false	false
requiredMessage	string	undefined	false
errorMessage	string	undefined	false
warningMessage	string	undefined	false
optionalText	string	undefined	false
size	'default' \| ‘compact'	'default'	false
clear	boolean	undefined	false
labelledBy	string	undefined	false
ariaLabel	string	undefined	false
maxlength	number	undefined	false
minlength	number	undefined	false
autocomplete	string	undefined	false
iconClass	string	undefined	false

Events

The interactions on the TextInput component are handled by the following Events

@update:modelValue : This event is emitted when the component's state or data is updated.

@change : This event is triggered when the selection within the component is modified.

@input : This event is emitted when there is an input action.

@enter : This event is emitted when enter key is pressed.

@blur : This event is emitted when the focus is lost on the input.

@focus : This event is emitted when when focusing the input.