---
title: Input 输入框
description: 用于承载用户信息录入的文本框，常用于表单、对话框等场景，对不同内容的信息录入，可拓展形成多种信息录入形式。
isComponent: true
usage: true
spline: form
author: 刘勇
---

## 基本用法

通过`value`，`defaultValue`，`v-model`可用来设置输入框的值，其中当通过`value`设置时，输入框不可输入，`defaultValue`用来
设置默认值，输入框的值改变之后可通过`change`来监听，`v-model`绑定的值为响应式，无需另外监听。

{{ base }}

## 不同类型输入框

通过`type`属性可设置输入框的原生类型，可选：`text`，`number`，`url`，`tel`，`password`，`search`，`submit`，`hidden`，默
认是：`text`。

> 提示：推荐使用`input-number`组件替代`number`类型输入框。

{{ type }}

## 不同尺寸

通过`size`可设置输入框的大小，可选：`small`，`medium`，`large`，默认是：`medium`。

{{ size }}

## 前后容器

通过`label`可设置输入框前面的文本信息，通过`prefixIcon`可设置输入框前面的图标，通过`suffixIcon`可设置输入框后面的图标，
通过`suffix`来设置后置图标前面的内容。

> 提示：除了下列示例，前后容器还可以同时进行设置，只不过这种输入框比较少见。

{{ prefixSuffix }}

## 文字对齐方式

通过`align`可设置输入框内部文本对齐方式，可选：`left`，`center`，`right`，默认是：`left`。

{{ align }}

## 自适应宽度

通过`autowidth`属性可设置输入框的宽度跟随内容或者 placeholder 自动撑开。

{{ autowidth }}

## 可清空

通过`clearable`属性可设置输入框的快捷清空功能，当输入框有值且鼠标移动到输入框，右侧会出现清空图标，通过设
置`showClearIconOnEmpty`，就算输入框没有值也会显示清空图标。

{{ clearable }}

## 限制输入长度

类似原生输入框的 maxlength 属性，通过`maxcharacter`或者`maxlength`可设置输入框可输入的最长文本，二者选其一即可
，maxcharacter 一个中文字符代表 2 个字符，maxlength 一个中文代表一个字符，当设置的值小于 0 则不限制输入长度。

> 提示：通过`allowInputOverMax`可设置输入框超出长度之后是否还可继续输入。

{{ maxlength }}

## 不同状态

通过`status`可设置不同状态的输入框样式，可选：`default`，`success`，`warning`，`error`，默认为：`default`，通过`tips`还
可定义提示信息，并且会跟随状态而改变。

> 提示：提示信息并不会占用页面位置。

{{ status }}

## 组合输入框

通过`l-input-group`包裹`l-input`可定义一个输入框组合，通过`separate`属性设置输入框之间有间隔。

{{ group }}

## 禁用、只读

通过`disabled`禁用输入框的输入，通过`readonly`设置输入框的只读模式。

{{ disabled }}
