Overview

For detailed design guidance, refer to the page on text fields .

Usage

Input with label

 

      <KTextbox label="Input with label" />
    

This text box includes a visible label, providing clear guidance and context to the user about the expected input.

Valid and invalid input

 

      <KTextbox
        v-model="numericInput"
        label="Numbers only"
        :invalid="!isNumeric(numericInput)"
        invalidText="Please enter a valid number."
      />
    

This text box only accepts numeric input. If any non-numeric character is entered, it will be considered invalid.

Disabled input

 

      <KTextbox label="Disabled input" disabled />
    

This text box is disabled. It cannot be edited or focused, so it will be skipped during keyboard navigation.

Number input

 


      <KTextbox label="Number Input" type="number" :min="0" :max="100" />

    

This is a numeric input field where users can input values within the range of 0 to 100.

Note: The KTextbox does not automatically validate the min and max values, however, it is recommended to use them for accessibility purposes while using the invalid and invalidText props to handle validation as needed.

Text area

 


      <KTextbox label="Text area" :textArea="true" />

    

This is a multi-line text input area, suitable for longer text entries.

Props

Name Description Type Default Required
label
Label for the text field
string true
clearAriaLabel
Value of the aria-label for clear button
string 'Clear'
value
Value of the text field
string|number null
invalid
Whether or not the current value is invalid
boolean false
invalidText
Text conditionally displayed based on values of invalid and showInvalidText
string null
showInvalidText
Show the invalidText even if the user has not focused or change the input. invalid must also be true for this to take effect.
boolean false
disabled
Whether or not the field is disabled
boolean false
autofocus
Whether or not to autofocus
boolean false
maxlength
Maximum number of characters for value
number null
autocomplete
HTML5 autocomplete attribute (off, on, name, username, current-password, etc)
string null
autocapitalize
HTML5 autocapitalize attribute. Used for touch-input enabled UI (off, on, words, etc)
string null
type
HTML5 type of input (text, password, number, etc.)
string 'text'
min
Minimum value (when value type is number)
number null
max
Maximum value (when value type is number)
number null
textArea
Whether to display as a multi-line text area
boolean false
clearable
When set to true, the component displays a clear button inside the input field.
boolean false

Events

Name Description
input
Emitted on each change with new value
keydown
Emitted with keydown events
blur
focus

Methods

Name Description
focus
Puts keyboard focus in the text field