Usage
Use the v-model directive to control the value of the InputTags.
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<PInputTags v-model="value" />
</template>
Use the default-value prop to set the initial value when you do not need to control its state.
<template>
<PInputTags :default-value="['Vue']" />
</template>
Placeholder
Use the placeholder prop to set a placeholder text.
<template>
<PInputTags placeholder="Enter tags..." />
</template>
Max Length
Use the max-length prop to set the maximum number of characters allowed in a tag.
<template>
<PInputTags :max-length="4" />
</template>
Color
Use the color prop to change the ring color when the InputTags is focused.
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<PInputTags v-model="value" color="neutral" highlight />
</template>
The
highlight prop is used here to show the focus state. It's used internally when a validation error occurs.Variants
Use the variant prop to change the appearance of the InputTags.
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<PInputTags v-model="value" variant="subtle" color="neutral" />
</template>
Sizes
Use the size prop to adjust the size of the InputTags.
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<PInputTags v-model="value" size="xl" />
</template>
Icon
Use the icon prop to show an Icon inside the InputTags.
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<PInputTags v-model="value" icon="i-lucide:search" size="md" variant="outline" />
</template>
Use the
leading and trailing props to set the icon position or the leading-icon and trailing-icon props to set a different icon for each position.Avatar
Use the avatar prop to show an Avatar inside the InputTags.
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<PInputTags
v-model="value"
:avatar="{
src: 'https://github.com/vuejs.png'
}"
size="md"
variant="outline"
/>
</template>
Delete Icon
Use the delete-icon prop to customize the delete Icon in the tags. Defaults to i-lucide:x.
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<PInputTags v-model="value" delete-icon="i-lucide:trash" />
</template>
Loading
Use the loading prop to show a loading icon on the InputTags.
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<PInputTags v-model="value" loading />
</template>
Loading Icon
Use the loading-icon prop to customize the loading icon. Defaults to i-lucide:loader-circle.
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<PInputTags v-model="value" loading loading-icon="i-lucide:loader" />
</template>
Disabled
Use the disabled prop to disable the InputTags.
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<PInputTags v-model="value" disabled />
</template>
Examples
Within a FormField
You can use the InputTags within a FormField component to display a label, help text, required indicator, etc.
<script setup lang="ts">
import { ref } from 'vue';
const tags = ref(['Vue']);
</script>
<template>
<PFormField
label="Tags"
required
>
<PInputTags
v-model="tags"
placeholder="Enter tags..."
/>
</PFormField>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
placeholder | stringThe placeholder text when the input is empty. | |
maxLength | numberThe maximum number of character allowed. | |
color | 'primary' | "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral" |
variant | 'outline' | "outline" | "soft" | "subtle" | "ghost" | "none" |
size | 'md' | "md" | "xs" | "sm" | "lg" | "xl" |
autofocus | boolean | |
autofocusDelay | 0 | number |
deleteIcon | appConfig.pohon.icons.close | string | objectThe icon displayed to delete a tag. |
highlight | boolean Highlight the ring color like a focus state. | |
modelValue | null | T[]The controlled value of the tags input. Can be bind as | |
defaultValue | T[]The value of the tags that should be added. Use when you do not need to control the state of the tags input | |
addOnPaste | boolean When | |
addOnTab | boolean When | |
addOnBlur | boolean When | |
duplicate | boolean When | |
disabled | boolean When | |
delimiter | string | RegExpThe character or regular expression to trigger the addition of a new tag. Also used to split tags for
| |
max | numberMaximum number of tags. | |
id | string | |
convertValue | (value: string): TConvert the input value to the desired type. Mandatory when using objects as values and using | |
displayValue | (value: T): stringDisplay the value of the tag. Useful when you want to apply modifications to the value like adding a suffix or when using object as values | |
name | stringThe name of the field. Submitted with its owning form as part of a name/value pair. | |
required | boolean When | |
icon | string | objectDisplay an icon based on the | |
avatar | PAvatarPropsDisplay an avatar on the left side.
| |
leading | boolean When | |
leadingIcon | string | objectDisplay an icon on the left side. | |
trailing | boolean When | |
trailingIcon | string | objectDisplay an icon on the right side. | |
loading | boolean When | |
loadingIcon | appConfig.pohon.icons.loading | string | objectThe icon when the |
autocomplete | "" | "name" | "off" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-local-prefix" | "tel-local-suffix" | "tel-national" | "home email" | "home tel" | "home tel-area-code" | "home tel-country-code" | "home tel-extension" | "home tel-local" | "home tel-local-prefix" | "home tel-local-suffix" | "home tel-national" | "mobile email" | "mobile tel" | "mobile tel-area-code" | "mobile tel-country-code" | "mobile tel-extension" | "mobile tel-local" | "mobile tel-local-prefix" | "mobile tel-local-suffix" | "mobile tel-national" | "work email" | "work tel" | "work tel-area-code" | "work tel-country-code" | "work tel-extension" | "work tel-local" | "work tel-local-prefix" | "work tel-local-suffix" | "work tel-national" | "name webauthn" | "additional-name webauthn" | "address-level1 webauthn" | "address-level2 webauthn" | "address-level3 webauthn" | "address-level4 webauthn" | "address-line1 webauthn" | "address-line2 webauthn" | "address-line3 webauthn" | "bday-day webauthn" | "bday-month webauthn" | "bday-year webauthn" | "cc-csc webauthn" | "cc-exp webauthn" | "cc-exp-month webauthn" | "cc-exp-year webauthn" | "cc-family-name webauthn" | "cc-given-name webauthn" | "cc-name webauthn" | "cc-number webauthn" | "cc-type webauthn" | "country webauthn" | "country-name webauthn" | "current-password webauthn" | "family-name webauthn" | "given-name webauthn" | "honorific-prefix webauthn" | "honorific-suffix webauthn" | "new-password webauthn" | "one-time-code webauthn" | "organization webauthn" | "postal-code webauthn" | "street-address webauthn" | "transaction-amount webauthn" | "transaction-currency webauthn" | "username webauthn" | "email webauthn" | "tel webauthn" | "tel-area-code webauthn" | "tel-country-code webauthn" | "tel-extension webauthn" | "tel-local webauthn" | "tel-local-prefix webauthn" | "tel-local-suffix webauthn" | "tel-national webauthn" | "home email webauthn" | "home tel webauthn" | "home tel-area-code webauthn" | "home tel-country-code webauthn" | "home tel-extension webauthn" | "home tel-local webauthn" | "home tel-local-prefix webauthn" | "home tel-local-suffix webauthn" | "home tel-national webauthn" | "mobile email webauthn" | "mobile tel webauthn" | "mobile tel-area-code webauthn" | "mobile tel-country-code webauthn" | "mobile tel-extension webauthn" | "mobile tel-local webauthn" | "mobile tel-local-prefix webauthn" | "mobile tel-local-suffix webauthn" | "mobile tel-national webauthn" | "work email webauthn" | "work tel webauthn" | "work tel-area-code webauthn" | "work tel-country-code webauthn" | "work tel-extension webauthn" | "work tel-local webauthn" | "work tel-local-prefix webauthn" | "work tel-local-suffix webauthn" | "work tel-national webauthn" | "billing name" | "billing name webauthn" | "billing additional-name" | "billing additional-name webauthn" | "billing address-level1" | "billing address-level1 webauthn" | "billing address-level2" | "billing address-level2 webauthn" | "billing address-level3" | "billing address-level3 webauthn" | "billing address-level4" | "billing address-level4 webauthn" | "billing address-line1" | "billing address-line1 webauthn" | "billing address-line2" | "billing address-line2 webauthn" | "billing address-line3" | "billing address-line3 webauthn" | "billing bday-day" | "billing bday-day webauthn" | "billing bday-month" | "billing bday-month webauthn" | "billing bday-year" | "billing bday-year webauthn" | "billing cc-csc" | "billing cc-csc webauthn" | "billing cc-exp" | "billing cc-exp webauthn" | "billing cc-exp-month" | "billing cc-exp-month webauthn" | "billing cc-exp-year" | "billing cc-exp-year webauthn" | "billing cc-family-name" | "billing cc-family-name webauthn" | "billing cc-given-name" | "billing cc-given-name webauthn" | "billing cc-name" | "billing cc-name webauthn" | "billing cc-number" | "billing cc-number webauthn" | "billing cc-type" | "billing cc-type webauthn" | "billing country" | "billing country webauthn" | "billing country-name" | "billing country-name webauthn" | "billing current-password" | "billing current-password webauthn" | "billing family-name" | "billing family-name webauthn" | "billing given-name" | "billing given-name webauthn" | "billing honorific-prefix" | "billing honorific-prefix webauthn" | "billing honorific-suffix" | "billing honorific-suffix webauthn" | "billing new-password" | "billing new-password webauthn" | "billing one-time-code" | "billing one-time-code webauthn" | "billing organization" | "billing organization webauthn" | "billing postal-code" | "billing postal-code webauthn" | "billing street-address" | "billing street-address webauthn" | "billing transaction-amount" | "billing transaction-amount webauthn" | "billing transaction-currency" | "billing transaction-currency webauthn" | "billing username" | "billing username webauthn" | "billing email" | "billing email webauthn" | "billing tel" | "billing tel webauthn" | "billing tel-area-code" | "billing tel-area-code webauthn" | "billing tel-country-code" | "billing tel-country-code webauthn" | "billing tel-extension" | "billing tel-extension webauthn" | "billing tel-local" | "billing tel-local webauthn" | "billing tel-local-prefix" | "billing tel-local-prefix webauthn" | "billing tel-local-suffix" | "billing tel-local-suffix webauthn" | "billing tel-national" | "billing tel-national webauthn" | "billing home email" | "billing home email webauthn" | "billing home tel" | "billing home tel webauthn" | "billing home tel-area-code" | "billing home tel-area-code webauthn" | "billing home tel-country-code" | "billing home tel-country-code webauthn" | "billing home tel-extension" | "billing home tel-extension webauthn" | "billing home tel-local" | "billing home tel-local webauthn" | "billing home tel-local-prefix" | "billing home tel-local-prefix webauthn" | "billing home tel-local-suffix" | "billing home tel-local-suffix webauthn" | "billing home tel-national" | "billing home tel-national webauthn" | "billing mobile email" | "billing mobile email webauthn" | "billing mobile tel" | "billing mobile tel webauthn" | "billing mobile tel-area-code" | "billing mobile tel-area-code webauthn" | "billing mobile tel-country-code" | "billing mobile tel-country-code webauthn" | "billing mobile tel-extension" | "billing mobile tel-extension webauthn" | "billing mobile tel-local" | "billing mobile tel-local webauthn" | "billing mobile tel-local-prefix" | "billing mobile tel-local-prefix webauthn" | "billing mobile tel-local-suffix" | "billing mobile tel-local-suffix webauthn" | "billing mobile tel-national" | "billing mobile tel-national webauthn" | "billing work email" | "billing work email webauthn" | "billing work tel" | "billing work tel webauthn" | "billing work tel-area-code" | "billing work tel-area-code webauthn" | "billing work tel-country-code" | "billing work tel-country-code webauthn" | "billing work tel-extension" | "billing work tel-extension webauthn" | "billing work tel-local" | "billing work tel-local webauthn" | "billing work tel-local-prefix" | "billing work tel-local-prefix webauthn" | "billing work tel-local-suffix" | "billing work tel-local-suffix webauthn" | "billing work tel-national" | "billing work tel-national webauthn" | "shipping name" | "shipping name webauthn" | "shipping additional-name" | "shipping additional-name webauthn" | "shipping address-level1" | "shipping address-level1 webauthn" | "shipping address-level2" | "shipping address-level2 webauthn" | "shipping address-level3" | "shipping address-level3 webauthn" | "shipping address-level4" | "shipping address-level4 webauthn" | "shipping address-line1" | "shipping address-line1 webauthn" | "shipping address-line2" | "shipping address-line2 webauthn" | "shipping address-line3" | "shipping address-line3 webauthn" | "shipping bday-day" | "shipping bday-day webauthn" | "shipping bday-month" | "shipping bday-month webauthn" | "shipping bday-year" | "shipping bday-year webauthn" | "shipping cc-csc" | "shipping cc-csc webauthn" | "shipping cc-exp" | "shipping cc-exp webauthn" | "shipping cc-exp-month" | "shipping cc-exp-month webauthn" | "shipping cc-exp-year" | "shipping cc-exp-year webauthn" | "shipping cc-family-name" | "shipping cc-family-name webauthn" | "shipping cc-given-name" | "shipping cc-given-name webauthn" | "shipping cc-name" | "shipping cc-name webauthn" | "shipping cc-number" | "shipping cc-number webauthn" | "shipping cc-type" | "shipping cc-type webauthn" | "shipping country" | "shipping country webauthn" | "shipping country-name" | "shipping country-name webauthn" | "shipping current-password" | "shipping current-password webauthn" | "shipping family-name" | "shipping family-name webauthn" | "shipping given-name" | "shipping given-name webauthn" | "shipping honorific-prefix" | "shipping honorific-prefix webauthn" | "shipping honorific-suffix" | "shipping honorific-suffix webauthn" | "shipping new-password" | "shipping new-password webauthn" | "shipping one-time-code" | "shipping one-time-code webauthn" | "shipping organization" | "shipping organization webauthn" | "shipping postal-code" | "shipping postal-code webauthn" | "shipping street-address" | "shipping street-address webauthn" | "shipping transaction-amount" | "shipping transaction-amount webauthn" | "shipping transaction-currency" | "shipping transaction-currency webauthn" | "shipping username" | "shipping username webauthn" | "shipping email" | "shipping email webauthn" | "shipping tel" | "shipping tel webauthn" | "shipping tel-area-code" | "shipping tel-area-code webauthn" | "shipping tel-country-code" | "shipping tel-country-code webauthn" | "shipping tel-extension" | "shipping tel-extension webauthn" | "shipping tel-local" | "shipping tel-local webauthn" | "shipping tel-local-prefix" | "shipping tel-local-prefix webauthn" | "shipping tel-local-suffix" | "shipping tel-local-suffix webauthn" | "shipping tel-national" | "shipping tel-national webauthn" | "shipping home email" | "shipping home email webauthn" | "shipping home tel" | "shipping home tel webauthn" | "shipping home tel-area-code" | "shipping home tel-area-code webauthn" | "shipping home tel-country-code" | "shipping home tel-country-code webauthn" | "shipping home tel-extension" | "shipping home tel-extension webauthn" | "shipping home tel-local" | "shipping home tel-local webauthn" | "shipping home tel-local-prefix" | "shipping home tel-local-prefix webauthn" | "shipping home tel-local-suffix" | "shipping home tel-local-suffix webauthn" | "shipping home tel-national" | "shipping home tel-national webauthn" | "shipping mobile email" | "shipping mobile email webauthn" | "shipping mobile tel" | "shipping mobile tel webauthn" | "shipping mobile tel-area-code" | "shipping mobile tel-area-code webauthn" | "shipping mobile tel-country-code" | "shipping mobile tel-country-code webauthn" | "shipping mobile tel-extension" | "shipping mobile tel-extension webauthn" | "shipping mobile tel-local" | "shipping mobile tel-local webauthn" | "shipping mobile tel-local-prefix" | "shipping mobile tel-local-prefix webauthn" | "shipping mobile tel-local-suffix" | "shipping mobile tel-local-suffix webauthn" | "shipping mobile tel-national" | "shipping mobile tel-national webauthn" | "shipping work email" | "shipping work email webauthn" | "shipping work tel" | "shipping work tel webauthn" | "shipping work tel-area-code" | "shipping work tel-area-code webauthn" | "shipping work tel-country-code" | "shipping work tel-country-code webauthn" | "shipping work tel-extension" | "shipping work tel-extension webauthn" | "shipping work tel-local" | "shipping work tel-local webauthn" | "shipping work tel-local-prefix" | "shipping work tel-local-prefix webauthn" | "shipping work tel-local-suffix" | "shipping work tel-local-suffix webauthn" | "shipping work tel-national" | "shipping work tel-national webauthn" | `section-${string} name` | `section-${string} name webauthn` | `section-${string} additional-name` | `section-${string} additional-name webauthn` | `section-${string} address-level1` | `section-${string} address-level1 webauthn` | `section-${string} address-level2` | `section-${string} address-level2 webauthn` | `section-${string} address-level3` | `section-${string} address-level3 webauthn` | `section-${string} address-level4` | `section-${string} address-level4 webauthn` | `section-${string} address-line1` | `section-${string} address-line1 webauthn` | `section-${string} address-line2` | `section-${string} address-line2 webauthn` | `section-${string} address-line3` | `section-${string} address-line3 webauthn` | `section-${string} bday-day` | `section-${string} bday-day webauthn` | `section-${string} bday-month` | `section-${string} bday-month webauthn` | `section-${string} bday-year` | `section-${string} bday-year webauthn` | `section-${string} cc-csc` | `section-${string} cc-csc webauthn` | `section-${string} cc-exp` | `section-${string} cc-exp webauthn` | `section-${string} cc-exp-month` | `section-${string} cc-exp-month webauthn` | `section-${string} cc-exp-year` | `section-${string} cc-exp-year webauthn` | `section-${string} cc-family-name` | `section-${string} cc-family-name webauthn` | `section-${string} cc-given-name` | `section-${string} cc-given-name webauthn` | `section-${string} cc-name` | `section-${string} cc-name webauthn` | `section-${string} cc-number` | `section-${string} cc-number webauthn` | `section-${string} cc-type` | `section-${string} cc-type webauthn` | `section-${string} country` | `section-${string} country webauthn` | `section-${string} country-name` | `section-${string} country-name webauthn` | `section-${string} current-password` | `section-${string} current-password webauthn` | `section-${string} family-name` | `section-${string} family-name webauthn` | `section-${string} given-name` | `section-${string} given-name webauthn` | `section-${string} honorific-prefix` | `section-${string} honorific-prefix webauthn` | `section-${string} honorific-suffix` | `section-${string} honorific-suffix webauthn` | `section-${string} new-password` | `section-${string} new-password webauthn` | `section-${string} one-time-code` | `section-${string} one-time-code webauthn` | `section-${string} organization` | `section-${string} organization webauthn` | `section-${string} postal-code` | `section-${string} postal-code webauthn` | `section-${string} street-address` | `section-${string} street-address webauthn` | `section-${string} transaction-amount` | `section-${string} transaction-amount webauthn` | `section-${string} transaction-currency` | `section-${string} transaction-currency webauthn` | `section-${string} username` | `section-${string} username webauthn` | `section-${string} email` | `section-${string} email webauthn` | `section-${string} tel` | `section-${string} tel webauthn` | `section-${string} tel-area-code` | `section-${string} tel-area-code webauthn` | `section-${string} tel-country-code` | `section-${string} tel-country-code webauthn` | `section-${string} tel-extension` | `section-${string} tel-extension webauthn` | `section-${string} tel-local` | `section-${string} tel-local webauthn` | `section-${string} tel-local-prefix` | `section-${string} tel-local-prefix webauthn` | `section-${string} tel-local-suffix` | `section-${string} tel-local-suffix webauthn` | `section-${string} tel-national` | `section-${string} tel-national webauthn` | `section-${string} home email` | `section-${string} home email webauthn` | `section-${string} home tel` | `section-${string} home tel webauthn` | `section-${string} home tel-area-code` | `section-${string} home tel-area-code webauthn` | `section-${string} home tel-country-code` | `section-${string} home tel-country-code webauthn` | `section-${string} home tel-extension` | `section-${string} home tel-extension webauthn` | `section-${string} home tel-local` | `section-${string} home tel-local webauthn` | `section-${string} home tel-local-prefix` | `section-${string} home tel-local-prefix webauthn` | `section-${string} home tel-local-suffix` | `section-${string} home tel-local-suffix webauthn` | `section-${string} home tel-national` | `section-${string} home tel-national webauthn` | `section-${string} mobile email` | `section-${string} mobile email webauthn` | `section-${string} mobile tel` | `section-${string} mobile tel webauthn` | `section-${string} mobile tel-area-code` | `section-${string} mobile tel-area-code webauthn` | `section-${string} mobile tel-country-code` | `section-${string} mobile tel-country-code webauthn` | `section-${string} mobile tel-extension` | `section-${string} mobile tel-extension webauthn` | `section-${string} mobile tel-local` | `section-${string} mobile tel-local webauthn` | `section-${string} mobile tel-local-prefix` | `section-${string} mobile tel-local-prefix webauthn` | `section-${string} mobile tel-local-suffix` | `section-${string} mobile tel-local-suffix webauthn` | `section-${string} mobile tel-national` | `section-${string} mobile tel-national webauthn` | `section-${string} work email` | `section-${string} work email webauthn` | `section-${string} work tel` | `section-${string} work tel webauthn` | `section-${string} work tel-area-code` | `section-${string} work tel-area-code webauthn` | `section-${string} work tel-country-code` | `section-${string} work tel-country-code webauthn` | `section-${string} work tel-extension` | `section-${string} work tel-extension webauthn` | `section-${string} work tel-local` | `section-${string} work tel-local webauthn` | `section-${string} work tel-local-prefix` | `section-${string} work tel-local-prefix webauthn` | `section-${string} work tel-local-suffix` | `section-${string} work tel-local-suffix webauthn` | `section-${string} work tel-national` | `section-${string} work tel-national webauthn` | `section-${string} billing name` | `section-${string} billing name webauthn` | `section-${string} billing additional-name` | `section-${string} billing additional-name webauthn` | `section-${string} billing address-level1` | `section-${string} billing address-level1 webauthn` | `section-${string} billing address-level2` | `section-${string} billing address-level2 webauthn` | `section-${string} billing address-level3` | `section-${string} billing address-level3 webauthn` | `section-${string} billing address-level4` | `section-${string} billing address-level4 webauthn` | `section-${string} billing address-line1` | `section-${string} billing address-line1 webauthn` | `section-${string} billing address-line2` | `section-${string} billing address-line2 webauthn` | `section-${string} billing address-line3` | `section-${string} billing address-line3 webauthn` | `section-${string} billing bday-day` | `section-${string} billing bday-day webauthn` | `section-${string} billing bday-month` | `section-${string} billing bday-month webauthn` | `section-${string} billing bday-year` | `section-${string} billing bday-year webauthn` | `section-${string} billing cc-csc` | `section-${string} billing cc-csc webauthn` | `section-${string} billing cc-exp` | `section-${string} billing cc-exp webauthn` | `section-${string} billing cc-exp-month` | `section-${string} billing cc-exp-month webauthn` | `section-${string} billing cc-exp-year` | `section-${string} billing cc-exp-year webauthn` | `section-${string} billing cc-family-name` | `section-${string} billing cc-family-name webauthn` | `section-${string} billing cc-given-name` | `section-${string} billing cc-given-name webauthn` | `section-${string} billing cc-name` | `section-${string} billing cc-name webauthn` | `section-${string} billing cc-number` | `section-${string} billing cc-number webauthn` | `section-${string} billing cc-type` | `section-${string} billing cc-type webauthn` | `section-${string} billing country` | `section-${string} billing country webauthn` | `section-${string} billing country-name` | `section-${string} billing country-name webauthn` | `section-${string} billing current-password` | `section-${string} billing current-password webauthn` | `section-${string} billing family-name` | `section-${string} billing family-name webauthn` | `section-${string} billing given-name` | `section-${string} billing given-name webauthn` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-prefix webauthn` | `section-${string} billing honorific-suffix` | `section-${string} billing honorific-suffix webauthn` | `section-${string} billing new-password` | `section-${string} billing new-password webauthn` | `section-${string} billing one-time-code` | `section-${string} billing one-time-code webauthn` | `section-${string} billing organization` | `section-${string} billing organization webauthn` | `section-${string} billing postal-code` | `section-${string} billing postal-code webauthn` | `section-${string} billing street-address` | `section-${string} billing street-address webauthn` | `section-${string} billing transaction-amount` | `section-${string} billing transaction-amount webauthn` | `section-${string} billing transaction-currency` | `section-${string} billing transaction-currency webauthn` | `section-${string} billing username` | `section-${string} billing username webauthn` | `section-${string} billing email` | `section-${string} billing email webauthn` | `section-${string} billing tel` | `section-${string} billing tel webauthn` | `section-${string} billing tel-area-code` | `section-${string} billing tel-area-code webauthn` | `section-${string} billing tel-country-code` | `section-${string} billing tel-country-code webauthn` | `section-${string} billing tel-extension` | `section-${string} billing tel-extension webauthn` | `section-${string} billing tel-local` | `section-${string} billing tel-local webauthn` | `section-${string} billing tel-local-prefix` | `section-${string} billing tel-local-prefix webauthn` | `section-${string} billing tel-local-suffix` | `section-${string} billing tel-local-suffix webauthn` | `section-${string} billing tel-national` | `section-${string} billing tel-national webauthn` | `section-${string} billing home email` | `section-${string} billing home email webauthn` | `section-${string} billing home tel` | `section-${string} billing home tel webauthn` | `section-${string} billing home tel-area-code` | `section-${string} billing home tel-area-code webauthn` | `section-${string} billing home tel-country-code` | `section-${string} billing home tel-country-code webauthn` | `section-${string} billing home tel-extension` | `section-${string} billing home tel-extension webauthn` | `section-${string} billing home tel-local` | `section-${string} billing home tel-local webauthn` | `section-${string} billing home tel-local-prefix` | `section-${string} billing home tel-local-prefix webauthn` | `section-${string} billing home tel-local-suffix` | `section-${string} billing home tel-local-suffix webauthn` | `section-${string} billing home tel-national` | `section-${string} billing home tel-national webauthn` | `section-${string} billing mobile email` | `section-${string} billing mobile email webauthn` | `section-${string} billing mobile tel` | `section-${string} billing mobile tel webauthn` | `section-${string} billing mobile tel-area-code` | `section-${string} billing mobile tel-area-code webauthn` | `section-${string} billing mobile tel-country-code` | `section-${string} billing mobile tel-country-code webauthn` | `section-${string} billing mobile tel-extension` | `section-${string} billing mobile tel-extension webauthn` | `section-${string} billing mobile tel-local` | `section-${string} billing mobile tel-local webauthn` | `section-${string} billing mobile tel-local-prefix` | `section-${string} billing mobile tel-local-prefix webauthn` | `section-${string} billing mobile tel-local-suffix` | `section-${string} billing mobile tel-local-suffix webauthn` | `section-${string} billing mobile tel-national` | `section-${string} billing mobile tel-national webauthn` | `section-${string} billing work email` | `section-${string} billing work email webauthn` | `section-${string} billing work tel` | `section-${string} billing work tel webauthn` | `section-${string} billing work tel-area-code` | `section-${string} billing work tel-area-code webauthn` | `section-${string} billing work tel-country-code` | `section-${string} billing work tel-country-code webauthn` | `section-${string} billing work tel-extension` | `section-${string} billing work tel-extension webauthn` | `section-${string} billing work tel-local` | `section-${string} billing work tel-local webauthn` | `section-${string} billing work tel-local-prefix` | `section-${string} billing work tel-local-prefix webauthn` | `section-${string} billing work tel-local-suffix` | `section-${string} billing work tel-local-suffix webauthn` | `section-${string} billing work tel-national` | `section-${string} billing work tel-national webauthn` | `section-${string} shipping name` | `section-${string} shipping name webauthn` | `section-${string} shipping additional-name` | `section-${string} shipping additional-name webauthn` | `section-${string} shipping address-level1` | `section-${string} shipping address-level1 webauthn` | `section-${string} shipping address-level2` | `section-${string} shipping address-level2 webauthn` | `section-${string} shipping address-level3` | `section-${string} shipping address-level3 webauthn` | `section-${string} shipping address-level4` | `section-${string} shipping address-level4 webauthn` | `section-${string} shipping address-line1` | `section-${string} shipping address-line1 webauthn` | `section-${string} shipping address-line2` | `section-${string} shipping address-line2 webauthn` | `section-${string} shipping address-line3` | `section-${string} shipping address-line3 webauthn` | `section-${string} shipping bday-day` | `section-${string} shipping bday-day webauthn` | `section-${string} shipping bday-month` | `section-${string} shipping bday-month webauthn` | `section-${string} shipping bday-year` | `section-${string} shipping bday-year webauthn` | `section-${string} shipping cc-csc` | `section-${string} shipping cc-csc webauthn` | `section-${string} shipping cc-exp` | `section-${string} shipping cc-exp webauthn` | `section-${string} shipping cc-exp-month` | `section-${string} shipping cc-exp-month webauthn` | `section-${string} shipping cc-exp-year` | `section-${string} shipping cc-exp-year webauthn` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-family-name webauthn` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-given-name webauthn` | `section-${string} shipping cc-name` | `section-${string} shipping cc-name webauthn` | `section-${string} shipping cc-number` | `section-${string} shipping cc-number webauthn` | `section-${string} shipping cc-type` | `section-${string} shipping cc-type webauthn` | `section-${string} shipping country` | `section-${string} shipping country webauthn` | `section-${string} shipping country-name` | `section-${string} shipping country-name webauthn` | `section-${string} shipping current-password` | `section-${string} shipping current-password webauthn` | `section-${string} shipping family-name` | `section-${string} shipping family-name webauthn` | `section-${string} shipping given-name` | `section-${string} shipping given-name webauthn` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-prefix webauthn` | `section-${string} shipping honorific-suffix` | `section-${string} shipping honorific-suffix webauthn` | `section-${string} shipping new-password` | `section-${string} shipping new-password webauthn` | `section-${string} shipping one-time-code` | `section-${string} shipping one-time-code webauthn` | `section-${string} shipping organization` | `section-${string} shipping organization webauthn` | `section-${string} shipping postal-code` | `section-${string} shipping postal-code webauthn` | `section-${string} shipping street-address` | `section-${string} shipping street-address webauthn` | `section-${string} shipping transaction-amount` | `section-${string} shipping transaction-amount webauthn` | `section-${string} shipping transaction-currency` | `section-${string} shipping transaction-currency webauthn` | `section-${string} shipping username` | `section-${string} shipping username webauthn` | `section-${string} shipping email` | `section-${string} shipping email webauthn` | `section-${string} shipping tel` | `section-${string} shipping tel webauthn` | `section-${string} shipping tel-area-code` | `section-${string} shipping tel-area-code webauthn` | `section-${string} shipping tel-country-code` | `section-${string} shipping tel-country-code webauthn` | `section-${string} shipping tel-extension` | `section-${string} shipping tel-extension webauthn` | `section-${string} shipping tel-local` | `section-${string} shipping tel-local webauthn` | `section-${string} shipping tel-local-prefix` | `section-${string} shipping tel-local-prefix webauthn` | `section-${string} shipping tel-local-suffix` | `section-${string} shipping tel-local-suffix webauthn` | `section-${string} shipping tel-national` | `section-${string} shipping tel-national webauthn` | `section-${string} shipping home email` | `section-${string} shipping home email webauthn` | `section-${string} shipping home tel` | `section-${string} shipping home tel webauthn` | `section-${string} shipping home tel-area-code` | `section-${string} shipping home tel-area-code webauthn` | `section-${string} shipping home tel-country-code` | `section-${string} shipping home tel-country-code webauthn` | `section-${string} shipping home tel-extension` | `section-${string} shipping home tel-extension webauthn` | `section-${string} shipping home tel-local` | `section-${string} shipping home tel-local webauthn` | `section-${string} shipping home tel-local-prefix` | `section-${string} shipping home tel-local-prefix webauthn` | `section-${string} shipping home tel-local-suffix` | `section-${string} shipping home tel-local-suffix webauthn` | `section-${string} shipping home tel-national` | `section-${string} shipping home tel-national webauthn` | `section-${string} shipping mobile email` | `section-${string} shipping mobile email webauthn` | `section-${string} shipping mobile tel` | `section-${string} shipping mobile tel webauthn` | `section-${string} shipping mobile tel-area-code` | `section-${string} shipping mobile tel-area-code webauthn` | `section-${string} shipping mobile tel-country-code` | `section-${string} shipping mobile tel-country-code webauthn` | `section-${string} shipping mobile tel-extension` | `section-${string} shipping mobile tel-extension webauthn` | `section-${string} shipping mobile tel-local` | `section-${string} shipping mobile tel-local webauthn` | `section-${string} shipping mobile tel-local-prefix` | `section-${string} shipping mobile tel-local-prefix webauthn` | `section-${string} shipping mobile tel-local-suffix` | `section-${string} shipping mobile tel-local-suffix webauthn` | `section-${string} shipping mobile tel-national` | `section-${string} shipping mobile tel-national webauthn` | `section-${string} shipping work email` | `section-${string} shipping work email webauthn` | `section-${string} shipping work tel` | `section-${string} shipping work tel webauthn` | `section-${string} shipping work tel-area-code` | `section-${string} shipping work tel-area-code webauthn` | `section-${string} shipping work tel-country-code` | `section-${string} shipping work tel-country-code webauthn` | `section-${string} shipping work tel-extension` | `section-${string} shipping work tel-extension webauthn` | `section-${string} shipping work tel-local` | `section-${string} shipping work tel-local webauthn` | `section-${string} shipping work tel-local-prefix` | `section-${string} shipping work tel-local-prefix webauthn` | `section-${string} shipping work tel-local-suffix` | `section-${string} shipping work tel-local-suffix webauthn` | `section-${string} shipping work tel-national` | `section-${string} shipping work tel-national webauthn` | string & {}
| |
list | string | |
readonly | false | true | "true" | "false" | |
pohon | { root?: ClassValue; base?: ClassValue; leading?: ClassValue; leadingIcon?: ClassValue; leadingAvatar?: ClassValue; leadingAvatarSize?: ClassValue; trailing?: ClassValue; trailingIcon?: ClassValue; item?: ClassValue; itemText?: ClassValue; itemDelete?: ClassValue; itemDeleteIcon?: ClassValue; input?: ClassValue; } |
Slots
| Slot | Type |
|---|---|
leading | { pohon: object; } |
default | { pohon: object; } |
trailing | { pohon: object; } |
item-text | { item: T; index: number; pohon: object; } |
item-delete | { item: T; index: number; pohon: object; } |
Emits
| Event | Type |
|---|---|
change | [event: Event] |
blur | [event: FocusEvent] |
focus | [event: FocusEvent] |
update:modelValue | [payload: T[]] |
invalid | [payload: T] |
addTag | [payload: T] |
removeTag | [payload: T] |
Expose
When accessing the component via a template ref, you can use the following:
| Name | Type |
|---|---|
inputRef | Ref<HTMLInputElement | null> |
Theme
We use unocss-variants to customize the theme. Read more about it in the theming guide.
Below is the theme configuration skeleton for the PInputTags. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
app.config.ts
export default defineAppConfig({
pohon: {
inputTags: {
slots: {
root: '',
base: '',
leading: '',
leadingIcon: '',
leadingAvatar: '',
leadingAvatarSize: '',
trailing: '',
trailingIcon: '',
item: '',
itemText: '',
itemDelete: '',
itemDeleteIcon: '',
input: ''
},
variants: {
fieldGroup: {
horizontal: {
root: '',
base: ''
},
vertical: {
root: '',
base: ''
}
},
size: {
xs: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
item: '',
itemDeleteIcon: ''
},
sm: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
item: '',
itemDeleteIcon: ''
},
md: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
item: '',
itemDeleteIcon: ''
},
lg: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
item: '',
itemDeleteIcon: ''
},
xl: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
item: '',
itemDeleteIcon: ''
}
},
variant: {
outline: '',
soft: '',
subtle: '',
ghost: '',
none: ''
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
leading: {
true: ''
},
trailing: {
true: ''
},
loading: {
true: ''
},
highlight: {
true: ''
},
type: {
file: ''
}
},
compoundVariants: [],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
};
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
inputTags: {
slots: {
root: '',
base: '',
leading: '',
leadingIcon: '',
leadingAvatar: '',
leadingAvatarSize: '',
trailing: '',
trailingIcon: '',
item: '',
itemText: '',
itemDelete: '',
itemDeleteIcon: '',
input: ''
},
variants: {
fieldGroup: {
horizontal: {
root: '',
base: ''
},
vertical: {
root: '',
base: ''
}
},
size: {
xs: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
item: '',
itemDeleteIcon: ''
},
sm: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
item: '',
itemDeleteIcon: ''
},
md: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
item: '',
itemDeleteIcon: ''
},
lg: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
item: '',
itemDeleteIcon: ''
},
xl: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
item: '',
itemDeleteIcon: ''
}
},
variant: {
outline: '',
soft: '',
subtle: '',
ghost: '',
none: ''
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
leading: {
true: ''
},
trailing: {
true: ''
},
loading: {
true: ''
},
highlight: {
true: ''
},
type: {
file: ''
}
},
compoundVariants: [],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
};
Akar
With Pohon UI, you can achieve similar component functionality with less code and effort, as it comes with built-in styles mechanism and behaviors that are optimized for common use cases. Since it's using unocss-variants it adds a runtime cost, but it can be worth it if you prioritize development speed and ease of use over fine-grained control.
If this is a deal breaker for you, you can always stick to using Akar and build your own custom components on top of it.
Changelog
No recent changes