Input

The input element with a type attribute whose value is "text" represents a one-line plain text edit control for the input element’s value.

Examples

Input

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseInput } from '@point-hub/papp'

const form = ref({
  name: ''
})
</script>

<template>
  <form @submit.prevent="">
    <component :is="BaseInput" v-model="form.name" />
  </form>
</template>

Label

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseInput } from '@point-hub/papp'

const form = ref({
  name1: '',
  name2: ''
})
</script>

<template>
  <form @submit.prevent="">
    <component
      :is="BaseInput"
      v-model="form.name1"
      label="Label"
      layout="horizontal"
      description="Horizontal Layout"
    />
    <component
      :is="BaseInput"
      v-model="form.name2"
      label="Label"
      layout="vertical"
      description="Vertical Layout"
    />
  </form>
</template>

Border

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseInput } from '@point-hub/papp'

const form = ref({
  name1: '',
  name2: '',
  name3: ''
})
</script>

<template>
  <form @submit.prevent="">
    <component :is="BaseInput" v-model="form.name1" label="Without Border" border="none" />
    <component :is="BaseInput" v-model="form.name2" label="Simple Border" border="simple" />
    <component :is="BaseInput" v-model="form.name3" label="Full Border" border="full" />
  </form>
</template>

Helper

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseInput } from '@point-hub/papp'

const form = ref({
  name1: '',
  name2: '',
  name3: '',
  name4: '',
  name5: '',
  name6: 'Disabled'
})

const errors = ref(['Error Example'])
</script>

<template>
  <form @submit.prevent="">
    <component :is="BaseInput" v-model="form.name1" label="Label" required />
    <component
      :is="BaseInput"
      v-model="form.name2"
      label="Label"
      placeholder="Placeholder example"
    />
    <component
      :is="BaseInput"
      v-model="form.name3"
      label="Label"
      description="Description example"
    />
    <component :is="BaseInput" v-model="form.name4" label="Label" :helpers="['Helper example']" />
    <component :is="BaseInput" v-model="form.name5" label="Label" v-model:errors="errors" />
    <component :is="BaseInput" v-model="form.name6" label="Label" description="Disabled" disabled />
  </form>
</template>

Group

Code

<script setup lang="ts">
import { BaseButton, BaseInput } from '@point-hub/papp'
import { ref } from 'vue'

const form = ref({
  name: '',
  password: ''
})
</script>

<template>
  <Demo>
    <form @submit.prevent="">
      <component
        :is="BaseInput"
        required
        v-model="form.name"
        label="Name"
        placeholder="Placeholder Name"
      >
        <template #prefix>
          <base-icon icon="i-far-user mx-2" />
        </template>
      </component>
      <component :is="BaseInput" required v-model="form.password" label="Password" type="password">
        <template #suffix>
          <component :is="BaseButton" variant="text">
            <base-icon icon="i-far-eye mx-2" />
          </component>
        </template>
      </component>
    </form>
  </Demo>
</template>

Input API

Types

export type BaseInputType = 'text' | 'tel' | 'email' | 'password' | 'date' | 'number'
export type BaseInputBorderType = 'none' | 'simple' | 'full'
export type BaseFormLayoutType = `horizontal` `vertical`

Props

Name	Type	Default	Description
v-model	string		v-model is required.
v-model:type	BaseInputType	text	Input type.
v-model:errors	string[]		Input error message.
id	string		Input id.
label	string		Input label.
description	string		Input description.
placeholder	string		Input placeholder.
border	BaseInputBorderType	simple	Input border.
layout	BaseFormLayoutType	vertical	Input layout.
maxlength	number		Max text length
autofocus	boolean	false	Focus input on page load.
required	boolean	false	if true input is required.
disabled	boolean	false	if true input is disabled.
helpers	string[]		Input helper message.

Slot

#prefix slot for rendering input prefix like icon

#suffix slot for rendering input suffix like icon