PersonaInput
Base text-input form.
Usage
Simple Usage
preview
vue
<template>
<p-input v-model="value" placeholder="Input Here" />
</template>Sizing
Input has 4 variants size: xs, sm, md, lg, default is md.
preview
vue
<template>
<p-input size="xs" />
<p-input size="sm" />
<p-input size="md" />
<p-input size="lg" />
</template>Disabled state
preview
vue
<template>
<p-input disabled />
</template>Readonly state
preview
vue
<template>
<p-input readonly />
</template>Error state
preview
vue
<template>
<p-input error />
</template>Clearable
Add clear button to input with prop clearable.
preview
vue
<template>
<p-input clearable />
</template>Prepend & Append
Input has append & prepend feature to place content inside input field. But the content that can be inserted is limited, which is only an icon.
Prepend
preview
vue
<template>
<p-input>
<template #prepend>
<IconAt />
</template>
</p-input>
<p-input>
<template #prepend>
<IconEmail class="text-muted" />
</template>
</p-input>
</template>Append
preview
vue
<template>
<p-input>
<template #append>
<IconCheck class="text-success" />
</template>
</p-input>
<p-input>
<template #append>
<p-spinner />
</template>
</p-input>
</template>Binding v-model
Input value can be binding with v-model.
preview
result:
-vue
<template>
<p-input v-model="result" />
</template>API
Props
| Props | Type | Default | Description |
|---|---|---|---|
type | String | text | Input type |
size | String | md | Input size variant, valid value: xs, sm, md, lg |
placeholder | String | - | Input placeholder |
disabled | Boolean | false | Disabled state |
readonly | Boolean | false | Readonly state |
error | Boolean | false | Error state |
clearable | Boolean | false | Enable clear button |
modelValue | String | - | v-model value |
Slots
| Name | Description |
|---|---|
prepend | Content to place icon inside of prepend input field |
append | Content to place icon inside of append input field |
Events
| Name | Arguments | Description |
|---|---|---|
change | String | Event when value changed |
clear | - | Event when clear button clicked |