> For the complete documentation index, see [llms.txt](https://bpio.gitbook.io/piman/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bpio.gitbook.io/piman/vue2/input.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
