InputTags

An input element that displays interactive tags.

Usage

Use the v-model directive to control the value of the InputTags.

Vue

<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.

Vue

<template>
  <PInputTags :default-value="['Vue']" />
</template>

Placeholder

Use the placeholder prop to set a placeholder text.

placeholder

<template>
  <PInputTags placeholder="Enter tags..." />
</template>

Max Length

Use the max-length prop to set the maximum number of characters allowed in a tag.

maxLength

<template>
  <PInputTags :max-length="4" />
</template>

Color

Use the color prop to change the ring color when the InputTags is focused.

color

highlight

Vue

<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.

variant

color

highlight

Vue

<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.

size

Vue

<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.

icon

size

variant

Vue

<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.

avatar.src

size

variant

Vue

<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.

deleteIcon

Vue

<script setup lang="ts">
const value = ref(['Vue'])
</script>

<template>
  <PInputTags v-model="value" delete-icon="i-lucide:trash" />
</template>

You can customize this icon globally in your app.config.ts under pohon.icons.close key.

You can customize this icon globally in your vite.config.ts under pohon.icons.close key.

Loading

Use the loading prop to show a loading icon on the InputTags.

trailing

Vue

<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.

loadingIcon

Vue

<script setup lang="ts">
const value = ref(['Vue'])
</script>

<template>
  <PInputTags v-model="value" loading loading-icon="i-lucide:loader" />
</template>

You can customize this icon globally in your app.config.ts under pohon.icons.loading key.

You can customize this icon globally in your vite.config.ts under pohon.icons.loading key.

Disabled

Use the disabled prop to disable the InputTags.

disabled

Vue

<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.

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`placeholder`		`string` The placeholder text when the input is empty.
`maxLength`		`number` The 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"`
`autofocusDelay`	`0`	`number`
`deleteIcon`	`appConfig.pohon.icons.close`	`string \| object` The icon displayed to delete a tag.
`modelValue`		`T[]` The controlled value of the tags input. Can be bind as `v-model`.
`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
`delimiter`		`string \| RegExp` The character or regular expression to trigger the addition of a new tag. Also used to split tags for `@paste` event
`max`		`number` Maximum number of tags.
`id`		`string`
`convertValue`		`(value: string) => T` Convert the input value to the desired type. Mandatory when using objects as values and using `ATagsInputInput`
`displayValue`		`(value: T) => string` Display 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`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`icon`		`string \| object` Display an icon based on the `leading` and `trailing` props.
`avatar`		`PAvatarProps` Display an avatar on the left side.
`leadingIcon`		`string \| object` Display an icon on the left side.
`trailingIcon`		`string \| object` Display an icon on the right side.
`loadingIcon`	`appConfig.pohon.icons.loading`	`string \| object` The icon when the `loading` prop is `true`.
`list`		`string`
`readonly`		`false \| true \| "true" \| "false"`
`autocomplete`		`"on" \| "off" \| string & {}`
`autofocus`		`boolean`
`highlight`		`boolean` Highlight the ring color like a focus state.
`addOnPaste`		`boolean` When `true`, allow adding tags on paste. Work in conjunction with delimiter prop.
`addOnTab`		`boolean` When `true` allow adding tags on tab keydown
`addOnBlur`		`boolean` When `true` allow adding tags blur input
`duplicate`		`boolean` When `true`, allow duplicated tags.
`disabled`		`boolean` When `true`, prevents the user from interacting with the tags input.
`required`		`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`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; }`

This component also supports all native <input> HTML attributes.

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

InputNumber

An input for numerical values with a customizable range.

InputTime

Enables users to input specific times within a designated field.