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>