Input

A text input component for receiving user input.

Name	Category	Description	Type	Default
`type`	Style	Input type, supports native HTML input types	`'text' \| 'password' \| 'textarea' \| 'date' \| 'time' \| 'url' \| ...`	`'text'`
`color`	Style	Input color, accepts preset theme colors or custom hex values	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| string`	—
`ghost`	Style	Whether to use ghost style (no border/shadow at rest, visible on hover)	`boolean`	`false`
`size`	Size	Size	`'large' \| 'default' \| 'small'`	`'default'`
`disabled`	State	Whether disabled	`boolean`	`false`
`readonly`	State	Whether readonly	`boolean`	`false`
`clearable`	Behavior	Whether clearable	`boolean`	`false`
`show-password`	Behavior	Whether to show password toggle	`boolean`	`false`
`autocomplete`	Behavior	Native autocomplete attribute	`string`	`'off'`
`autofocus`	Behavior	Whether to auto focus	`boolean`	`false`
`form`	Behavior	Native form attribute, associates with a form	`string`	—
`model-value / v-model`	Content	Binding value	`string`	—
`placeholder`	Content	Placeholder	`string`	—
`prefix-icon`	Content	Prefix icon	`string`	—
`suffix-icon`	Content	Suffix icon	`string`	—
`input`	Event	Triggered on input	`(value: string) => void`	—
`change`	Event	Triggered when value changes	`(value: string) => void`	—
`focus`	Event	Triggered on focus	`(event: FocusEvent) => void`	—
`blur`	Event	Triggered on blur	`(event: FocusEvent) => void`	—
`clear`	Event	Triggered on clear	`() => void`	—
`prefix`	Slot	Prefix content		—
`suffix`	Slot	Suffix content		—
`prepend`	Slot	Prepend content		—
`append`	Slot	Append content		—
`ref`	Expose	Input HTML element	`Ref<HTMLInputElement>`	—
`focus`	Expose	Focus the input	`() => void`	—
`blur`	Expose	Blur the input	`() => void`	—
`clear`	Expose	Clear the input	`() => void`	—
`select`	Expose	Select the text in the input	`() => void`	—

Basic Usage

Basic usage of the input component.

<template>
  <div class="demo-input">
    <px-input v-model="input1" placeholder="请输入内容" />
    <px-input v-model="input2" placeholder="禁用状态" disabled />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const input1 = ref('');
const input2 = ref('');
</script>

<style scoped>
.demo-input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
</style>

Input Colors

Use the color prop to apply preset theme colors to the input border and shadow.

<template>
  <div class="demo-input">
    <px-input v-model="v1" color="primary" placeholder="Primary" />
    <px-input v-model="v2" color="success" placeholder="Success" />
    <px-input v-model="v3" color="warning" placeholder="Warning" />
    <px-input v-model="v4" color="danger" placeholder="Danger" />
    <px-input v-model="v5" color="info" placeholder="Info" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const v1 = ref('');
const v2 = ref('');
const v3 = ref('');
const v4 = ref('');
const v5 = ref('');
</script>

<style scoped>
.demo-input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
</style>

Custom Colors

Pass any hex color string to the color prop for fully custom colored inputs. Combine with ghost for transparent-at-rest variants.

<template>
  <div class="demo-input">
    <h4>Default</h4>
    <px-input v-model="v1" color="#626aef" placeholder="Indigo #626aef" />
    <px-input v-model="v2" color="#ff6b9d" placeholder="Pink #ff6b9d" />
    <px-input v-model="v3" color="#36cfc9" placeholder="Teal #36cfc9" />

    <h4>Ghost</h4>
    <px-input v-model="v4" color="#626aef" ghost placeholder="Indigo ghost" />
    <px-input v-model="v5" color="#ff6b9d" ghost placeholder="Pink ghost" />
    <px-input v-model="v6" color="#36cfc9" ghost placeholder="Teal ghost" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const v1 = ref('');
const v2 = ref('');
const v3 = ref('');
const v4 = ref('');
const v5 = ref('');
const v6 = ref('');
</script>

<style scoped>
.demo-input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
.demo-input h4 {
  margin: 8px 0 0;
}
</style>

Ghost Style

Use the ghost prop to create borderless inputs that reveal their border and shadow on hover/focus. Works with both preset and custom colors.

<template>
  <div class="demo-input">
    <px-input v-model="v1" ghost placeholder="Ghost default" />
    <px-input v-model="v2" ghost color="primary" placeholder="Ghost primary" />
    <px-input v-model="v3" ghost color="success" placeholder="Ghost success" />
    <px-input v-model="v4" ghost color="danger" placeholder="Ghost danger" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const v1 = ref('');
const v2 = ref('');
const v3 = ref('');
const v4 = ref('');
</script>

<style scoped>
.demo-input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
</style>

Different Sizes

Use size property to set the input size.

<template>
  <div class="demo-input">
    <px-input v-model="input1" size="large" placeholder="大尺寸" />
    <px-input v-model="input2" placeholder="默认尺寸" />
    <px-input v-model="input3" size="small" placeholder="小尺寸" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const input1 = ref('');
const input2 = ref('');
const input3 = ref('');
</script>

<style scoped>
.demo-input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
</style>

Disabled & Readonly

Use disabled and readonly properties to control the input state.

<template>
  <div class="demo-input">
    <px-input v-model="input1" placeholder="Disabled input" disabled />
    <px-input v-model="input2" placeholder="Readonly input" readonly />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const input1 = ref('');
const input2 = ref('Readonly value');
</script>

<style scoped>
.demo-input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
</style>

Clearable

Use clearable property to enable the clear button.

<template>
  <div class="demo-input">
    <px-input v-model="input" placeholder="可清空" clearable />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const input = ref('Hello World');
</script>

<style scoped>
.demo-input {
  max-width: 300px;
}
</style>

Password

Use type="password" and show-password properties to create a password input.

<template>
  <form class="demo-input" @submit.prevent>
    <px-input v-model="password" type="password" placeholder="请输入密码" show-password />
  </form>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const password = ref('');
</script>

<style scoped>
.demo-input {
  max-width: 300px;
}
</style>

Prefix & Suffix

Use prefix-icon / suffix-icon properties or prefix / suffix slots to add content before or after the input.

<template>
  <div class="demo-input">
    <px-input v-model="input1" placeholder="Prefix icon" prefix-icon="search" />
    <px-input v-model="input2" placeholder="Suffix icon" suffix-icon="edit" />
    <px-input v-model="input3" placeholder="With slot prefix">
      <template #prefix>
        <px-icon icon="coin" />
      </template>
    </px-input>
    <px-input v-model="input4" placeholder="With slot suffix">
      <template #suffix>
        <px-icon icon="mail" />
      </template>
    </px-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const input1 = ref('');
const input2 = ref('');
const input3 = ref('');
const input4 = ref('');
</script>

<style scoped>
.demo-input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
</style>

Native Types

The type prop supports all native HTML input types. Here are examples with date, time, and url.

<template>
  <div class="demo-input">
    <px-input v-model="date" type="date" placeholder="Select date">
      <template #prefix>
        <px-icon icon="calendar" />
      </template>
    </px-input>
    <px-input v-model="time" type="time" placeholder="Select time">
      <template #prefix>
        <px-icon icon="clock" />
      </template>
    </px-input>
    <px-input v-model="url" type="url" placeholder="https://example.com">
      <template #prefix>
        <px-icon icon="link" />
      </template>
    </px-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const date = ref('');
const time = ref('');
const url = ref('');
</script>

<style scoped>
.demo-input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
</style>

Input ​

Basic Usage ​

Input Colors ​

Custom Colors ​

Ghost Style ​

Different Sizes ​

Disabled & Readonly ​

Clearable ​

Password ​

Prefix & Suffix ​

Native Types ​