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 ​

import { ref } from 'vue';
import { Input } from '@youcan/alto';

const username = ref('');

<Input v-model="username" placeholder="Enter Username" />

API Reference ​

InputGroup ​

Usage ​

import { ref } from 'vue';
import { Input, InputGroup } from '@youcan/alto';

const username = ref('');

<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.