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
When queried via useTemplateRef, this component exposes
| Name | Type | Description |
|---|---|---|
focus | method | Focuses the input element |
Tokens
CSS variable tokens used for global or per-instance manipulation of certain styling.
| Token | Default | Description |
|---|---|---|
--vui-input-color-text-red | var(--color-text-red) | Error text color |
--vui-input-color-text | var(--color-text) | Input text color |
--vui-input-color-text-light | var(--color-text-light) | Placeholder text color |
--vui-input-color-text-lighter | var(--color-text-lighter) | Dim text color |
--vui-input-color-border | var(--color-border) | Border color |
--vui-input-color-border-strong | var(--color-border-strong) | Focused border color |
--vui-input-color-border-weak | var(--color-border-weak) | Subtle border color |
--vui-input-background-color | var(--color-bg-raised) | Input background |
--vui-input-height | var(--interactive-el-height) | Input height |
--vui-input-padding | var(--space-xs) | Input padding |
--vui-textarea-padding | var(--space-xs) | Textarea padding |
--vui-input-width | 224px | Default input width |