KTextbox link to current page

develop | Release notes

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.

Readonly input

  

      <KTextbox
        label="Token"
        value="123456789"
        readonly
      />

This text box is readonly. It cannot be edited but it can still select and copy the text. It's also included in 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 —
readonly
#
Makes the input field non-editable. Still allowing to focus and copy the content
 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