Input
Last updated:2026-02-03 16:02:13
Component Feature
Single-line text input component supports various input types, validation rules and style configuration.
Basic Usage
Associate with the form field by name and set the placeholder prompt text.
Template example:
<Input name="username" placeholder="enter username" />
Effect display as follows:
Attribute Description
Property Name | Type | Description | Default value |
name ★ | string | Form field name | - |
inputType | "number" | "email" | "text" | "password" | "tel" | "url" | Input Type | "text" |
defaultValue | string | Default value | - |
required | boolean | Required | false |
pattern | string | Verify regex | - |
placeholder | string | Placeholder text | - |
allowAutofillExtensions | boolean | Permission for automatic filling expansion | false |
autoSelect | boolean | Automatically select text | false |
autoFocus | boolean | auto-focus | false |
disabled | boolean | Disable or not | false |
variant | "soft" | "outline" | Input Box style variant | "outline" |
size | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | Input Box size | "md" |
gutterSize | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | padding size | - |
pill | boolean | whether the shape is capsule | false |
Note:
Marked with required attribute.
Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No
Feedback