Overview
For detailed design guidance, refer to the page on text fields .Usage
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
This text box only accepts numeric input. If any non-numeric character is entered, it will be considered invalid.
Character limit
This text box has a maximum character limit of 20. It displays a character counter to inform the user of the remaining characters they can enter.
Disabled input
This text box is disabled. It cannot be edited or focused, so it will be skipped during keyboard navigation.
Readonly input
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
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.
Password input
This text box masks the entered characters to enhance security and privacy.
Text area
This is a multi-line text input area, suitable for longer text entries.
Clearable
This text box includes a clear button that allows users to quickly remove the entered text.
Validation text
When the value is invalid, shows the validation text even if the user has not focused or changed the input.
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
| — |
appearanceOverrides | CSS styles to apply to the container | object |
null
| — |
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 |