Input

Input is a styled text input with v-model support, error/hint messaging, and disabled state.

ExamplesCodeUsageChangelog

Basic usage

Tailwind v4

<Input v-model="name" placeholder="Enter your name" />

With label (use FormGroup)

For labeled inputs use FormGroup — it wires the for/id relationship and handles error/hint display consistently:

Full name *

Tailwind v4

<FormGroup label="Full name" for="fullname" required>
  <Input id="fullname" v-model="name" placeholder="Jane Smith" />
</FormGroup>

Error state

Pass an error string to show a danger-colored border and error message below the input:

Please enter a valid email

Tailwind v4

<Input v-model="email" type="email" :error="errors.email" />

Hint text

Only lowercase letters, numbers, and hyphens.

Tailwind v4

<Input v-model="slug" hint="Only lowercase letters, numbers, and hyphens." />

Note: error takes precedence over hint — if both are provided only the error is shown.

Disabled

Tailwind v4

<Input v-model="value" :disabled="true" />

Input types

The type prop maps directly to the native <input> type:

Tailwind v4

<Input v-model="password" type="password" />
<Input v-model="count" type="number" />
<Input v-model="date" type="date" />

Props

Prop	Type	Default	Description
modelValue	string | number	—	Value (use with v-model)
type	string	'text'	Native input type
placeholder	string	—	Placeholder text
error	string	—	Error message — shows danger border + text below
hint	string	—	Hint text below the input (hidden when error is set)
disabled	boolean	false	Disables the input

Events

Event	Payload	Description
update:modelValue	string	Emitted on every keystroke