Input Text

Stable v1.0.2

The base text input every form starts with. Labels, error messages, icons on either side, and size variants, all built in so you're not rebuilding the basics every time.

Interactive Playground

Every prop, wired live. Swap the native type, adornments, and key filter and watch the code snippet update in real time.

Type & Label

Type

Text

Label

Label Position

Top

Content

Placeholder

Required

State

Disabled

Error State

Icons

Start Icon

End Icon

Appearance

Size

Small (sm)

Key Filter

None

Identity

Custom Element ID

Playground Value

Live Source Code

<InputText
  v-model="value"
  id="custom-text-id"
  label="Playground Value"
  placeholder="Enter a value..."
/>

Types & Adornments

Use iconStart or iconEnd to add visual context. Pass the label prop to instantly generate a semantic header.

Vessel Name

Search Events

VAT Percentage *

Container ISO Code

Template

<!-- Clean, semantic implementation -->
<InputText
  label="VAT Percentage"
  required
  iconEnd="lucide:percent"
  v-model="vatValue"
/>

Inline Forms (Left Labels)

Pass labelPosition="left" to align the label next to the input. This layout automatically stacks on mobile devices for optimal responsiveness.

Port of Loading *

Agent Email

Land Item Quotation

Quotation ID cannot be empty.

Template

<div class="flex flex-col gap-6 w-full">
  <InputText
    label="Port of Loading"
    labelPosition="left"
    required
  />

  <InputText
    label="Land Item Quotation"
    labelPosition="left"
    error="Quotation ID cannot be empty."
  />
</div>

Validation & States

The error prop transforms the input and intelligently maps over arrays to display multiple validation requirements.

Locked Channel Event

Single Error (String)

Please enter a valid agent email address.

Complex Validation (Array)

Vehicle Order Form ID must be at least 8 characters long.

Must contain the standard prefix (VOF-).

Must exist on the live server.

Template

<script setup>
const vofErrors = ref([
  'Vehicle Order Form ID must be at least 8 characters long.',
  'Must contain the standard prefix (VOF-).',
  'Must exist on the live server.'
])
</script>

<template>
  <!-- Pass the array directly to the error prop -->
  <InputText
    label="Vehicle Order Form"
    v-model="vofValue"
    iconStart="lucide:file-signature"
    :error="vofErrors"
  />
</template>

Input Sizing

Five carefully calibrated sizes. Use xs specifically for dense data tables or tight inline route filters.

Extra Small (xs)

Small (sm)

Medium (md) - Default

Large (lg)

Extra Large (xl)

Template

<!-- Dense layout inputs -->
<InputText label="Extra Small" size="xs" placeholder="Filter IDs..." />
<InputText label="Small" size="sm" placeholder="Search ports..." />

<!-- Standard layout inputs -->
<InputText label="Medium" size="md" placeholder="Search bookings..." />
<InputText label="Large" size="lg" placeholder="Search overviews..." />

Key Filter

Restrict input characters dynamically using the keyfilter prop. Try typing letters into the Voyage Number field below!

Voyage Number ('int')

Port Code ('alpha')

Custom RegExp (Lowercase only)

Template

<!-- Blocks letters and symbols -->
<InputText v-model="voyageValue" keyfilter="int" />

<!-- Blocks numbers and symbols -->
<InputText v-model="portValue" keyfilter="alpha" />

<!-- You can also pass a custom RegExp! -->
<InputText v-model="regexValue" :keyfilter="/[a-z]/" />

API Reference

Props

Name	Type / Signature	Default	Description
modelValue	string \| number	""	The input value, bound via v-model.
type	string	"text"	Native HTML input type (text, email, search, password, etc.).
id	string	undefined	Overrides the auto-generated element id (useId()), e.g. for an external <label for> or test hooks.
label	string	undefined	Top or left-aligned input label.
labelPosition	"top" \| "left"	"top"	Alignment of the label relative to the input field.
required	boolean	false	Marks the field as required and renders an asterisk next to the label.
placeholder	string	undefined	Text shown when the input is empty.
disabled	boolean	false	Disables user interaction and grays out the component.
error	string \| boolean \| string[]	false	Applies red error styling and displays error message(s) below the input.
iconStart	string	undefined	Lucide icon displayed on the left side of the input.
iconEnd	string	undefined	Lucide icon displayed on the right side of the input. Can be combined with iconStart.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"sm"	Dimensional size of the component.
keyfilter	"int" \| "num" \| "alpha" \| "alphanum" \| RegExp	undefined	Restricts which characters can be typed into the field.

Events

Event Name	Payload Signature	Description
@focus	(event: FocusEvent)	Fired when the input receives focus.
@blur	(event: FocusEvent)	Fired when the input loses focus.
@input	(value: string \| number)	Fired on every keystroke.
@change	(value: string \| number)	Fired when the value commits (on native change).