'/%3e%3cpath%20d='M0%2059.6282L80.7353%200.299805L161.471%2059.6282L80.7355%20118.345L0%2059.6282Z'%20fill='%2310B981'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_0_1'%20x1='80.7354'%20y1='39.9999'%20x2='80.7354'%20y2='113.5'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23065F46'/%3e%3cstop%20offset='1'%20stop-color='%2310B981'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e){kind=small}
#API
Input
props
Name | Description | Type | Default | Values | Required |
|---|---|---|---|---|---|
size | Control size. One of xs, sm, md, lg, xl. | String | md | xssmmdlgxl | |
color | Theme or CSS color used for the control accents. | String | primary | ||
disabled | Disables interaction and applies disabled styling. | Boolean | false | ||
loading | Shows a loading indicator and blocks interaction. | Boolean | false | ||
loadingLabel | Accessible label announced while loading. | String | |||
loadingStatus | Loader visual status (for example active or indeterminate). | String | active | ||
modelValue | Bound value (v-model). | String Number Boolean Object Array | |||
id | Native id attribute for the input element. | String | |||
name | Native name attribute for form submission. | String | |||
readonly | Makes the field read-only without disabling it. | Boolean | false | ||
required | Marks the field as required for validation. | Boolean | false | ||
validateOnInput | Runs validation on each input event when true. | Boolean | true | ||
label | Visible label text for the field. | String | |||
helper | Helper text shown below the field. | String | |||
error | External error message; overrides rule errors when set. | String | |||
hideFooter | Hides the footer area (helper / error). | Boolean | false | ||
rules | Validation rule functions or rule descriptors. | Array | () => [] | ||
tooltip | Optional tooltip text next to the label. | String | |||
skipFormRegistry | Skips registering this field with a parent x-form. | Boolean | false | ||
showPasswordToggle | Shows a visibility toggle when `type` is `password`. | Boolean | true | ||
dir | Text direction for the native input (`ltr` or `rtl`). | String | ltr | ||
icon | Shortcut for `iconLeft`. | String | |||
iconLeft | Icon name shown before the input value. | String | |||
iconRight | Icon name shown after the input value. | String | |||
max | Native `max` attribute (typically for number inputs). | Number String | |||
maxlength | Maximum character length for the input value. | Number String | |||
min | Native `min` attribute (typically for number inputs). | Number String | |||
minlength | Minimum character length for the input value. | Number String | |||
placeholder | Placeholder text shown when the value is empty. | String | |||
type | Native input type (text, password, email, number, etc.). | String | text | ||
step | Native `step` attribute for numeric inputs. | Number String | |||
block | Stretches to the full width of the parent. | Boolean | false | ||
showCounter | Shows a character counter in the footer. | Boolean | false | ||
clearable | Shows a clear button when the value is not empty. | Boolean | false |
slots
Name | Description |
|---|---|
prefix | Content before the input (left adornment). |
suffix | Content after the input (right adornment). |
emits
Name | Description |
|---|---|
update:modelValue | Emitted when the bound value changes (v-model). |
blur | Emitted when the field loses focus. |
focus | Emitted when the field receives focus. |
input | Emitted on native input events. |
change | Emitted when the value is committed (change). |
methods
Name | Description |
|---|---|
focus | Focus the underlying control. |
blur | Remove focus from the underlying control. |
reset | Reset the field value and validation state. |
validate | Run validation rules and return whether the field is valid. |
setError | Set an external error message on the field. |