Input
Displays a form input field component.
When to Use
- Within forms to let the user input short lines of text or numbers.
- When a search input is required.
Usage
ts
import { ref } from 'vue';
import { Input } from '@youcan/alto';
const username = ref('');
vue
<Input v-model="username" placeholder="Enter Username" />
API Reference
InputGroup
Usage
ts
import { ref } from 'vue';
import { Input, InputGroup } from '@youcan/alto';
const username = ref('');
vue
<InputGroup label="New username">
<template #input>
<Input v-model="username" placeholder="Enter username" />
</template>
</InputGroup>
API Reference
Examples
Suffix
Displays an input field with a suffix element (e.g. to show units or currency).
Disabled
Displays a disabled input field, indicating that the input cannot be interacted with.
Error
Displays an input field with an error state, indicating a required field or incorrect input.
Group Error
Displays an input group with an error state and an error message below the input field.