Input

Introduction to using the Input component

Input fields are components that allow webpages and users to exchange information. The information can be of various types, such as passwords, single-line text, and multi-line text. For password types, consideration must be given to preventing others from seeing what the user types, and sometimes users forget where they typed, so a button is provided to reveal the hidden text. Additionally, users may need a clear button to quickly clear and re-enter content.

Note

When using <bpa-input :id="{id}">, a <label :for="{id}"> is required
But if it is inside <bpa-form-item :labelFor="{id}">, adding a <label> is not necessary.

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

Size

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

Placeholder text

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

Disabled

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

Required

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

Read-only

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

Error hint

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

Access key

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

Hide clear button

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

Type

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

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

Attributes

Name	Value	Type	Default	Required	Note
id
value		[ String, Number ]
size	small, large
type
placeholder
disabled
required
readonly
error
accesskey
disabledClear

Demo