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>Accept Character
You can filter what characters are allowed to be input using the prop accept. The value can be RegExp, or using available preset.
preview
vue
<template>
<p-input accept="0-9" placeholder="Numeric Only (Manual)" />
<p-input accept="numeric" placeholder="Numeric Only (using Preset)" />
</template>Available Preset
| Preset | RegExp | Alias |
|---|---|---|
numeric | 0-9 | num, digit |
alpha | A-Za-z | |
alpha-space | A-Za-z\s | |
alpha-space-symbol | A-Za-z\s!"#$%&'()*+,./:;<=>?@[\\\]^_`{|}~- | non-numeric |
alpha-numeric | A-Za-z0-9 | alpha-num |
alpha-numeric-space | A-Za-z0-9\s | alpha-num-space |
alpha-numeric-space-symbol | A-Za-z0-9\s!"#$%&'()*+,./:;<=>?@[\\\]^_`{|}~- | text, alpha-num-space-symbol |
numeric-space | 0-9\s | num-space |
numeric-space-symbol | 0-9\s!"#$%&'()*+,./:;<=>?@[\\\]^_`{|}~- | non-alpha, num-space-symbol |
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 |
accept | String | - | Whitelist character can be inputted |
modelValue | String | - | v-model value |
container-class | String or Array or Object | - | CSS class to add in the input container |
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 |