Input
A versatile input component that supports various input types, validation, and customization options. It includes features like character limits, error messages, and custom slots for additional content.
Props
| Name | Default | Type |
|---|---|---|
type | text | text password color date email number range search tel time url file Type of input field |
label | — | string Label text for the input |
hint | — | string Helper text displayed below the input |
limit | — | number string Maximum number of characters allowed |
expand | false | boolean Makes the input expand to full width |
placeholder | — | string Placeholder text when input is empty |
required | false | boolean Makes the input required |
modelValue | '' | string number Value of the input (for v-model) |
readonly | false | boolean Makes the input readonly |
focus | false | boolean Focuses the input when mounted |
errors | [] | string[] Array of error messages to display |
accept | — | string File types to accept (for file inputs) |
multiple | false | boolean Allows multiple file selection (for file inputs) |
min | — | number Minimum value (for number inputs) |
max | — | number Maximum value (for number inputs) |
disabled | false | boolean Disables the input |
Events
| Name | Payload | Description |
|---|---|---|
update:modelValue | string number | Emitted when the input value changes |
Slots
| Name | Accepts | Description |
|---|---|---|
before | any | Content to be displayed before any of the input content |
start | any | Content to be displayed at the start of the input |
end | any | Content to be displayed at the end of the input |
after | any | Content to be displayed after the all the input content |
Exposes
| Name | Type | Description |
|---|---|---|
focus | method | Focuses the input element |