Input
The r-input is a versatile component designed for various types of user input, providing a seamless and customizable experience.
Usage
import { RInput } from '@rebilly/revel';
<r-input v-model="firstName" label="First name" />
Examples
| Name | Type | Default | Description |
|---|---|---|---|
| label | Nullable, string | null | Label for input |
| modelValue | Nullable, union | null | Model value |
| validate | Nullable, ValidationState | null | Validation object (Vuelidate) |
| showValidateMessages | boolean | false | Show validation messages |
| helpText | Nullable, string | null | Help text that displays below the input |
| multiline | boolean | false | Multiline input |
| submitOnEnter | boolean | false | Submit on enter |
| inputEvents | Record, string, unknown | () => ({}) | Input events |
| leftIcon | Nullable, IconNames | null | Displays an icon on the left side of the input |
| leftIconClickPointer | boolean | false | Enables or disables the pointer cursor and click event on the left icon |
| rightIcon | Nullable, IconNames | null | Displays an icon on the right side of the input |
| rightIconClickPointer | boolean | false | Enables or disables the pointer cursor and click event on the right icon |
| leftIconSpinning | boolean | false | Displays a spinning icon on the left side of the input |
| rightIconSpinning | boolean | false | Displays a spinning icon on the right side of the input |
| leftLabel | Nullable, string | null | Displays a label on the left side of the input |
| rightLabel | Nullable, string | null | Displays a label on the right side of the input |
| password | boolean | false | Changes the input type to password |
| numeric | boolean | false | Changes the input type to number |
| name | string | () => nanoid() | Adds a name attribute to the input |
| rows | union, string, number | '1' | Rows for textarea input |
| autoFocus | boolean | false | Input autofocus |
| autoHighlight | boolean | false | Input auto highlight |
| autoHighlightOnFocus | boolean | false | Input auto highlight on focus |
| maxLength | union, number, string, undefined | undefined | Displays the number of characters left |
| autoResize | boolean | false | Enables or disables the auto resizing of the textarea |
| autoComplete | string | '' | Enables or disables the autocomplete feature |
| Name | Description |
|---|---|
| right-button | Additional action button content |
| Name | Description |
|---|---|
| focus | |
| click | |
| blur | |
| key-press | |
| key-down | |
| key-submit | |
| update:modelValue | |
| left-icon-click | |
| right-icon-click |