Skip to content
On this page

Input

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

PresetRegExpAlias
numeric0-9num, digit
alphaA-Za-z
alpha-spaceA-Za-z\s
alpha-space-symbolA-Za-z\s!"#$%&'()*+,./:;<=>?@[\\\]^_`{|}~-non-numeric
alpha-numericA-Za-z0-9alpha-num
alpha-numeric-spaceA-Za-z0-9\salpha-num-space
alpha-numeric-space-symbolA-Za-z0-9\s!"#$%&'()*+,./:;<=>?@[\\\]^_`{|}~-text, alpha-num-space-symbol
numeric-space0-9\snum-space
numeric-space-symbol0-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

PropsTypeDefaultDescription
typeStringtextInput type
sizeStringmdInput size variant, valid value: xs, sm, md, lg
placeholderString-Input placeholder
disabledBooleanfalseDisabled state
readonlyBooleanfalseReadonly state
errorBooleanfalseError state
clearableBooleanfalseEnable clear button
acceptString-Whitelist character can be inputted
modelValueString-v-model value
container-classString or Array or Object-CSS class to add in the input container

Slots

NameDescription
prependContent to place icon inside of prepend input field
appendContent to place icon inside of append input field

Events

NameArgumentsDescription
changeStringEvent when value changed
clear-Event when clear button clicked

See Also

Released under the MIT License.