Input

Retrieve text input from a user.

Default

code
<template>
  <PStack class="max-w-md" gap="4" :direction="{ sm: 'col', md: 'row' }">
    <PInput size="sm" placeholder="sm" />
    <PInput placeholder="md(default)" />
    <PInput size="lg" placeholder="lg" />
  </PStack>
</template>

Password

code
<script setup>
import { ref } from 'vue'

const password = ref('')
</script>

<template>
  <PStack class="max-w-md">
    <PInput v-model="password" password placeholder="Enter your password" />
  </PStack>
</template>

allowClear

code
<script setup>
import { ref } from 'vue'

const password = ref('')
</script>

<template>
  <PStack class="max-w-md">
    <PInput v-model="password" allow-clear placeholder="Enter your password" />
  </PStack>
</template>

Prefix and suffix

code
<template>
  <PStack class="max-w-md" gap="6" direction="col">
    <PInput placeholder="Default">
      <template #prefix>
        <IconArrowCircleUp />
      </template>
    </PInput>

    <PInput placeholder="Default">
      <template #suffix>
        <IconArrowCircleUp />
      </template>
    </PInput>

    <PInput placeholder="Default">
      <template #prefix>
        https://
      </template>

      <template #suffix>
        .com
      </template>
    </PInput>

    <PInput placeholder="Default" :prefix-style="false" :suffix-style="false">
      <template #prefix>
        <IconArrowCircleUp />
      </template>

      <template #suffix>
        <IconArrowCircleUp />
      </template>
    </PInput>
  </PStack>
</template>

Disabled

code
<template>
  <PStack class="max-w-md" gap="6" direction="col">
    <PInput disabled placeholder="Default">
      <template #prefix>
        <IconArrowCircleUp />
      </template>
    </PInput>

    <PInput disabled placeholder="Default">
      <template #suffix>
        <IconArrowCircleUp />
      </template>
    </PInput>

    <PInput disabled placeholder="Default">
      <template #prefix>
        https://
      </template>

      <template #suffix>
        .com
      </template>
    </PInput>

    <PInput disabled placeholder="Default" :prefix-style="false" :suffix-style="false">
      <template #prefix>
        <IconArrowCircleUp />
      </template>

      <template #suffix>
        <IconArrowCircleUp />
      </template>
    </PInput>
  </PStack>
</template>

Error

code
<template>
  <PStack class="max-w-md" gap="8" direction="col">
    <PInput error="An error message." size="xs" placeholder="Default" />
    <PInput error="An error message." size="sm" placeholder="Default" />
    <PInput error="An error message." placeholder="Default" />
    <PInput error="An error message." size="lg" placeholder="Default" />
  </PStack>
</template>

Label

code
<template>
  <div class="max-w-md">
    <PInput label="My Label"/>
  </div>
</template>