TInput / 输入框

Input is the most basic data entry component in forms. Supports multiple types, prefix/suffix icons and text, validation states, and labels. / 输入框是表单中最基础的数据录入组件，支持多种类型、前后缀图标/文本、验证状态和标签提示。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
type	string	'text'	Input type (text, password, number, etc.)
placeholder	string	—	Placeholder text
size	'sm' | 'lg'	—	Size
disabled	boolean	false	Disabled
readonly	boolean	false	Readonly
maxlength	number	—	Max length
label	string	—	Label text
hint	string	—	Hint text
validation	'valid' | 'invalid'	—	Validation state
error	boolean	false	Show error state
error-message	string	—	Error message
prependIcon	Icon	—	Prefix icon
appendIcon	Icon	—	Suffix icon
prependText	string	—	Prefix text
appendText	string	—	Suffix text
rounded	boolean	false	Rounded style
flush	boolean	false	Borderless style
block	boolean	false	Full width
wrapperClass	string	—	Outer container class (e.g. "mb-3")

v-model

v-model	Type / 类型	Description / 说明
v-model	string	Two-way binding / 双向绑定

Events / 事件

Event	Description / 说明
@update:modelValue	v-model update
@change	Value changed
@focus / @blur	Focus / Blur

Basic Usage / 基础用法

<script setup lang="ts">
import { TInput } from '@gulcc/tabler-vue'
</script>

<template>
  <TInput v-model="name" placeholder="Enter name / 请输入姓名" />
  <TInput v-model="email" type="email" placeholder="Enter email / 请输入邮箱" />
  <TInput v-model="password" type="password" placeholder="Password / 密码" />
</template>

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TInput } from '@gulcc/tabler-vue'
import { IconSearch, IconUser } from '@tabler/icons-vue'

const email = ref('')
const isValidEmail = computed(() => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value))
</script>

<template>
  <!-- With label and validation / 带标签和验证 -->
  <TInput
    v-model="email"
    label="Email / 邮箱"
    placeholder="Enter email / 请输入邮箱"
    :error="!!email && !isValidEmail"
    error-message="Invalid email / 邮箱格式不正确"
    wrapper-class="mb-3"
  />

  <!-- With icons / 带图标 -->
  <TInput
    v-model="search"
    placeholder="Search / 搜索..."
    :prepend-icon="IconSearch"
  />

  <!-- With prefix/suffix text / 带前后缀文本 -->
  <TInput
    v-model="url"
    placeholder="Enter address / 请输入地址"
    prepend-text="https://"
    append-text=".com"
  />

  <!-- With hint / 带提示 -->
  <TInput
    v-model="phone"
    label="Phone / 手机号"
    hint="11 digits / 请输入11位手机号码"
    maxlength="11"
  />
</template>

Tips / 避坑指南

• TInput uses inheritAttrs: false — pass container classes via wrapperClass prop, not directly on the component
• Both :error="true" and error-message="xxx" are required to show validation errors
• Icons are passed via prependIcon / appendIcon props (component reference), NOT in the default slot
• Use wrapper-class="mb-3" for form spacing — TInput has no bottom margin by default