Floating Label Input

// Filled variant
<Input
  id="name-filled"
  label="Floating filled"
  variant="filled"
/>

// Standard variant
<Input
  id="email-standard" 
  label="Floating standard"
  variant="standard"
/>

Floating Textarea

// Filled variant
<Input
  id="name-filled"
  label="Floating filled"
  variant="filled"
  type="textarea"
/>

// Standard variant
<Input
  id="email-standard" 
  label="Floating standard"
  variant="standard"
  type="textarea"
/>

Input with Error State

The Input component supports error states to provide validation feedback to users. You can pass a string as the error prop to display a specific error message.

// Error with filled variant
<Input
  id="error-filled"
  label="With error"
  variant="filled"
  error="This field is required"
/>

// Error with standard variant
<Input
  id="error-standard" 
  label="With error"
  variant="standard"
  error="Please enter a valid email"
/>

You can also pass a boolean true to indicate an error state without a message:

<Input
  label="Username"
  error={true}
/>

Input with Success State

Similar to errors, you can indicate a successful validation state using the success prop:

// Success with message
<Input
  id="success-filled"
  label="With success"
  variant="filled"
  success="Username is available"
/>

// Success without message
<Input
  id="success-standard" 
  label="With success"
  variant="standard"
  success={true}
/>

Input Sizes

The Input component supports different sizes: sm, md (default), and lg.

// Small input
<Input
  id="small-input"
  label="Small input"
  variant="filled"
  size="sm"
/>

// Medium input (default)
<Input
  id="medium-input" 
  label="Medium input (default)"
  variant="filled"
  size="md"
/>

// Large input
<Input
  id="large-input" 
  label="Large input"
  variant="filled"
  size="lg"
/>

Required Input

You can mark an input as required, which will add a red asterisk to the label:

<Input
  id="required-filled"
  label="Required field"
  variant="filled"
  required
/>

Input Types

The Input component supports all standard HTML input types, plus a special textarea type:

// Email input
<Input
  id="email-input"
  label="Email"
  type="email"
  variant="filled"
/>

// Password input
<Input
  id="password-input" 
  label="Password"
  type="password"
  variant="standard"
/>

// Number input
<Input
  id="number-input" 
  label="Age"
  type="number"
  variant="filled"
/>

// Date input
<Input
  id="date-input" 
  label="Date"
  type="date"
  variant="standard"
/>

Using with v-model

The Input component fully supports Vue’s v-model for two-way binding:

<script setup>
import { ref } from 'vue';
import { Input } from 'spoko-design-system';

const username = ref('');
const email = ref('');
</script>

<template>
  <Input
    v-model="username"
    label="Username"
    variant="filled"
  />
  
  <Input
    v-model="email"
    label="Email"
    variant="standard"
    type="email"
  />
  
  <div>
    Current values:
    <p>Username: {{ username }}</p>
    <p>Email: {{ email }}</p>
  </div>
</template>

Props Reference

Events