Input

Input fields capture user input with multiple types and states, paired with smooth animations and modern styling.
Status: Beta

Basic Usage

Basic Input

The most common text input usage.

Demo will load when visible.

<template>
  <TuffInput v-model="value" placeholder="Type here..." />
</template>

Input Types

Supported: text / password / textarea / date / email / number.

Input Types

Text, password, and textarea.

Demo will load when visible.

<template>
  <TuffInput v-model="text" placeholder="Text input" />
  <TuffInput v-model="password" type="password" placeholder="Password input" />
  <TuffInput v-model="content" type="textarea" placeholder="Multiline text" :rows="4" />
</template>

Readonly / Disabled

Readonly and disabled states.

Demo will load when visible.

<template>
  <TuffInput v-model="readonlyValue" readonly placeholder="Readonly" />
  <TuffInput v-model="disabledValue" disabled placeholder="Disabled" />
</template>

Clearable

One-click clear for content.

Demo will load when visible.

<template>
  <TuffInput v-model="clearableValue" clearable placeholder="Clearable" />
</template>

Prefix / Suffix Slots

Prefix / Suffix

Icons help reinforce context.

Demo will load when visible.

<template>
  <TuffInput v-model="withPrefix" placeholder="Search">
    <template #prefix>
      <TxIcon icon="i-carbon-search" />
    </template>
  </TuffInput>
  <TuffInput v-model="withSuffix" placeholder="User">
    <template #suffix>
      <TxIcon icon="i-carbon-user" />
    </template>
  </TuffInput>
</template>

API

Props

Property	Type	Description
modelValue / v-model		Bound value
placeholder		Placeholder text
type	textpasswordtextareadateemailnumber	Input type
disabled		Disabled state
readonly		Readonly state
clearable		Clearable content
rows		Textarea rows (only textarea)
prefixIcon		Prefix icon class
suffixIcon		Suffix icon class