Floating Label Input

Floating filled

Floating standard

<div class="input-wrapper-filled">
<input id="name-filled" type="text" placeholder=" "
  class="peer input-base input-filled input-md" />
<label for="name-filled"
  class="input-label-base input-label-filled input-label-md input-label-filled-state">
  Floating filled
</label>

</div>

<div class="input-wrapper-standard">
<input id="email-standard" type="text" placeholder=" "
  class="peer input-base input-standard input-md" />
<label for="email-standard"
  class="input-label-base input-label-standard input-label-md input-label-standard-state">
  Floating standard
</label>

</div>

Floating Textarea

Floating filled

Floating standard

<div class="input-wrapper-filled">
<textarea id="ta-filled" rows="3" placeholder=" "
  class="peer input-base input-filled input-md input-textarea"></textarea>

<label for="ta-filled"
  class="input-label-base input-label-filled input-label-md input-label-filled-state">
  Floating filled
</label>

</div>

<div class="input-wrapper-standard">
<textarea id="ta-standard" rows="3" placeholder=" "
  class="peer input-base input-standard input-md input-textarea"></textarea>

<label for="ta-standard"
  class="input-label-base input-label-standard input-label-md input-label-standard-state">
  Floating standard
</label>

</div>

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. Pass true for visual-only error state without a message.

With error

This field is required

With error

Please enter a valid email

<div class="input-wrapper-filled">
<input id="error-filled" type="text" placeholder=" "
  class="peer input-base input-filled input-md input-error" />
<label for="error-filled"
  class="input-label-base input-label-filled input-label-md input-label-filled-state input-label-error">
  With error
</label>

<div class="input-error-message">This field is required</div>

</div>

<div class="input-wrapper-standard">
<input id="error-standard" type="text" placeholder=" "
  class="peer input-base input-standard input-md input-error" />
<label for="error-standard"
  class="input-label-base input-label-standard input-label-md input-label-standard-state input-label-error">
  With error
</label>

<div class="input-error-message">Please enter a valid email</div>

</div>

Input with Success State

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

With success

Username is available

With success

<div class="input-wrapper-filled">
<input id="success-filled" type="text" placeholder=" "
  class="peer input-base input-filled input-md input-success" />
<label for="success-filled"
  class="input-label-base input-label-filled input-label-md input-label-filled-state input-label-success">
  With success
</label>

<div class="input-success-message">Username is available</div>

</div>

<div class="input-wrapper-standard">
<input id="success-standard" type="text" placeholder=" "
  class="peer input-base input-standard input-md input-success" />
<label for="success-standard"
  class="input-label-base input-label-standard input-label-md input-label-standard-state input-label-success">
  With success
</label>

</div>

Input Sizes

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

Small input

Medium input (default)

Large input

<div class="input-wrapper-filled">
<input id="small-input" type="text" placeholder=" "
  class="peer input-base input-filled input-sm" />
<label for="small-input"
  class="input-label-base input-label-filled input-label-sm input-label-filled-state">
  Small input
</label>

</div>

<div class="input-wrapper-filled">
<input id="medium-input" type="text" placeholder=" "
  class="peer input-base input-filled input-md" />
<label for="medium-input"
  class="input-label-base input-label-filled input-label-md input-label-filled-state">
  Medium input (default)
</label>

</div>

<div class="input-wrapper-filled">
<input id="large-input" type="text" placeholder=" "
  class="peer input-base input-filled input-lg" />
<label for="large-input"
  class="input-label-base input-label-filled input-label-lg input-label-filled-state">
  Large input
</label>

</div>

Required Input

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

Required field *

<div class="input-wrapper-filled">
<input id="required-filled" type="text" placeholder=" " required
  class="peer input-base input-filled input-md" />
<label for="required-filled"
  class="input-label-base input-label-filled input-label-md input-label-filled-state">
  Required field<span class="text-red-500 ml-1">*</span>
</label>

</div>

Input Types

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

Password

Age

Date

<div class="input-wrapper-filled">
<input id="email-input" type="email" placeholder=" "
  class="peer input-base input-filled input-md" />
<label for="email-input"
  class="input-label-base input-label-filled input-label-md input-label-filled-state">
  Email
</label>

</div>

<div class="input-wrapper-standard">
<input id="password-input" type="password" placeholder=" "
  class="peer input-base input-standard input-md" />
<label for="password-input"
  class="input-label-base input-label-standard input-label-md input-label-standard-state">
  Password
</label>

</div>

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

Prop	Type	Default	Description
`label`*	`string`	`—`	Label text for the floating label
`variant`	`'standard' \| 'filled'`	`'standard'`	Visual style variant
`id`	`string`	`random`	Unique identifier; also used as name if name not set
`name`	`string`	`same as id`	Name attribute for the input field
`type`	`string`	`'text'`	Input type — all HTML types plus 'textarea'
`modelValue`	`string \| number`	`''`	Value for v-model binding
`required`	`boolean`	`false`	Adds required asterisk to label
`rows`	`number`	`3`	Number of rows (textarea only)
`placeholder`	`string`	`' '`	Space keeps floating label working; override with caution
`error`	`string \| boolean`	`false`	Error state — true for visual only, string to show message
`success`	`string \| boolean`	`false`	Success state — true for visual only, string to show message
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the input field
`class`	`string`	`''`	Additional CSS classes on the wrapper element

Events

Event	Parameters	Description
`update:modelValue`	`(value: string \| number)`	Emitted when input value changes (for v-model)
`input`	`(event: Event)`	Native input event
`focus`	`(event: FocusEvent)`	Native focus event
`blur`	`(event: FocusEvent)`	Native blur event