PxInputText

A labeled text input primitive with built-in error/hint messaging and optional left/right icons. Supports text, password, email, number, search, tel, and url types.

Usage

Demo

Email

Search

<script setup>
import { ref } from 'vue'
import { Mail } from '@lucide/vue'
import { PxInputText } from 'praxis-vue-ui'

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

<template>
  <PxInputText
    v-model="email"
    label="Email"
    placeholder="you@example.com"
    type="email"
    :icon-left="Mail"
  />
</template>

Error & Hint States

Error & Hint

Username

Username must be at least 3 characters.

Display Name

This is shown publicly on your profile.

<template>
  <PxInputText label="Username" model-value="ab" error="Username must be at least 3 characters." />
  <PxInputText label="Display Name" hint="This is shown publicly on your profile." />
</template>

API Reference

Prop	Type	Default	Description
modelValue	string | number	''	The value of the input
label	string	—	The label text
error	string	—	An error message. Changes input to error state.
hint	string	—	Hint text to display below the input
type	"text" | "password" | "email" | "number" | "search" | "tel" | "url"	'text'	Input type, defaults to text
disabled	boolean	false	Native disabled state
readonly	boolean	false	Native readonly state
required	boolean	false	Mark field as required
iconLeft	Component	—	Left icon component
iconRight	Component	—	Right icon component
placeholder	string	—	Placeholder text
autocomplete	string	—	Native autocomplete attribute
min	string | number	—	Number min
max	string | number	—	Number max
step	string | number	—	Number step
maxlength	string | number	—	Max length