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:

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><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></code></pre>

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