Input 输入框

Form · Interactive component

Single-line text input.

On-demand importwbbb-ui/components/input

Basic Usage

Example code

<script setup lang="ts">
import { ref } from 'vue'
import { WbbbInput } from 'wbbb-ui/components/input'
import 'wbbb-ui/styles/input'

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

<template>
  <WbbbInput v-model="value" />
</template>

Live mobile previewOpen in a new tab ↗

States and Interaction

All listed states can be operated and verified in the live Playground preview.

DefaultFilledFocusDisabledError

API Reference

Props

Property	Description	Type	Default	Required
clearable	Shows a control for clearing the current input value.	boolean	false	No
disabled	Prevents user interaction with the component.	boolean	false	No
error	Shows the component in its error visual state.	boolean	false	No
maxlength	Limits the number of characters that can be entered.	number	140	No
modelValue	Provides the current value used by v-model.	string \| number	''	No
placeholder	Sets placeholder text when no value is present.	string	''	No
readonly	Prevents editing while keeping the value readable.	boolean	false	No
type	Sets the semantic type or variant of the component.	'text' \| 'number' \| 'idcard' \| 'digit' \| 'safe-password' \| 'nickname'	'text'	No

Events

• update:modelValue
• blur
• change
• clear
• confirm
• focus

Slots

None

Two-way binding

Supports v-model (modelValue).

Platform Notes

Build verification: H5, App Vue, WeChat Mini Program, Alipay Mini Program, and Douyin Mini Program.

Runtime differences: H5 supports keyboard focus and reduced motion. Mini Programs provide equivalent touch interaction; verify upload, date selection, and overlays on target platforms.

Usage note: Use Playground to verify further state combinations and cross-platform behavior.