# Input

<div data-full-width="false"><figure><img src="/files/IpPIBSYTrPYDrlHQbgwq" alt="Input 介紹示意圖"><figcaption></figcaption></figure></div>

Input 輸入框是一種可以讓網頁與使用者互相傳遞訊息的元件，而訊息又具有多種類型，例如：密碼、單行文字、多行文字，其中密碼類型必須考量使用者在填寫時，盡量不要讓人看到，或是有時候會忘記自己打到哪邊，所以會設置一個按鈕，將隱藏的文字重新顯示。另外，使用者也會需要用到清除的按鈕以快速清除然後重新輸入內容。

{% hint style="warning" %}
注意

{% code fullWidth="true" %}

```
使用 <bpa-input :id="{id}"> 時，需要 <label :for="{id}">
但如果是在 <bpa-form-item :labelFor="{id}"> 裡面時，就不需要加 <label>。

<label for="test">Label</label>
<bpa-input id="test"/>
...
<bpa-form-item :labelFor="test">
    <bpa-input id="test"/>
</bpa-form-item>
```

{% endcode %}
{% endhint %}

### 大小 <a href="#size" id="size"></a>

```html
<bpa-input v-model="value" size="small"/>
```

### 提示文字 <a href="#placeholder" id="placeholder"></a>

```html
<bpa-input v-model="value" placeholder="Please enter here!"/>
```

### 禁用 <a href="#disabled" id="disabled"></a>

```html
<bpa-input v-model="value" disabled/>
```

### 必填 <a href="#required" id="required"></a>

```html
<bpa-input v-model="value" required/>
```

### 唯讀 <a href="#readonly" id="readonly"></a>

```html
<bpa-input v-model="value" readonly/>
```

### 錯誤提示 <a href="#error" id="error"></a>

```html
<bpa-input v-model="value" error/>
```

### 快捷鍵 <a href="#accesskey" id="accesskey"></a>

```html
<bpa-input v-model="value" accesskey="K"/>
```

### 隱藏清除按鈕 <a href="#disabled-clear" id="disabled-clear"></a>

```html
<bpa-input v-model="value" disabledClear/>
```

### 類型 <a href="#type" id="type"></a>

```html
<!-- password -->
<bpa-input v-model="value" type="password"/>

<!-- multiple lines -->
<bpa-input v-model="value" type="textarea"/>
```

### 屬性 <a href="#props" id="props"></a>

<table data-full-width="false"><thead><tr><th width="161">Name</th><th>Value</th><th>Type</th><th>Default</th><th data-type="checkbox">Required</th><th>Note</th></tr></thead><tbody><tr><td>id</td><td></td><td></td><td></td><td>false</td><td></td></tr><tr><td>value</td><td></td><td>[ String, Number ]</td><td></td><td>false</td><td></td></tr><tr><td>size</td><td>small,<br>large</td><td></td><td></td><td>false</td><td></td></tr><tr><td>type</td><td></td><td></td><td></td><td>false</td><td></td></tr><tr><td>placeholder</td><td></td><td></td><td></td><td>false</td><td></td></tr><tr><td>disabled</td><td></td><td></td><td></td><td>false</td><td></td></tr><tr><td>required</td><td></td><td></td><td></td><td>false</td><td></td></tr><tr><td>readonly</td><td></td><td></td><td></td><td>false</td><td></td></tr><tr><td>error</td><td></td><td></td><td></td><td>false</td><td></td></tr><tr><td>accesskey</td><td></td><td></td><td></td><td>false</td><td></td></tr><tr><td>disabledClear</td><td></td><td></td><td></td><td>false</td><td></td></tr></tbody></table>

### Demo

{% embed url="<https://codesandbox.io/embed/piman-input-4ueybi?fontsize=14&module=/src/App.vue&theme=dark>" fullWidth="false" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bpio.gitbook.io/piman/vue2/input.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.