TagInput

Used to enter multiple values as tags.

Demo

React

SizeExtra SmallSmallMediumLargeExtra Large

Required

Invalid

Read only

Disabled

Enter tags

Vue

SizeExtra SmallSmallMediumLargeExtra Large

Required

Invalid

Read only

Disabled

Enter tags

Usage

React

import { useState } from 'react';
import { TagInput } from '@fintech-sandpit/ui/react';

const [value, setValue] = useState<string[]>([]);

return (
  <TagInput
    value={value}
    label="Enter tags"
    placeholder="Add tag"
    onChange={setValue}
  />
);

Vue

<script setup lang="ts">
import { ref } from 'vue';
import { TagInput } from '@fintech-sandpit/ui/vue';

const value = ref<string[]>([]);
</script>

<template>
  <TagInput
    v-model="value"
    label="Enter tags"
    placeholder="Add tag"
  />
</template>

Props

React

Name	Type	Default	Description
value	string[]	—	The value of the tag input
defaultValue	string[]	—	The default value of the tag input
name	string	—	The name of the tag input
size	Size	md	The size of the tag input
maxLength	number	—	The maximum length of the tag input
blurBehavior	BlurBehavior	blur	The blur behavior of the tag input
placeholder	string	—	Placeholder of the tag input
required	boolean	false	Whether the tag input is required
invalid	boolean	false	Whether the tag input is invalid
read-only	boolean	false	Whether the tag input is read only
disabled	boolean	false	Whether the tag input is disabled
validate	(args: TagInputValidateArgs) => boolean	—	The validation function of the tag input

Vue

Name	Type	Default	Description
model-value	string[]	—	The value of the tag input 1
default-value	string[]	—	The default value of the tag input
name	string	—	The name of the tag input
label	string	—	The label of the tag input
size	Size	md	The size of the tag input
max-length	number	—	The maximum length of the tag input
blur-behavior	BlurBehavior	blur	The blur behavior of the tag input
placeholder	string	—	The placeholder of the tag input
required	boolean	false	Whether the tag input is required
invalid	boolean	false	Whether the tag input is invalid
read-only	boolean	false	Whether the tag input is read only
validate	(args: TagInputValidateArgs) => boolean	—	The validation function of the tag input

1. Can be used with the v-model directive for two-way binding.

Events

React

Name	Arguments	Description
onChange	(value: string[]) => void	Callback fired when the value changes

Vue

Name	Payload	Description
update:model-value	string[]	Event emitted when the value changes

Types

type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'

type TagInputValidateArgs = {
  value: string[];
  inputValue: string;
}

BlurBehavior

The behavior of the tags input when the input is blurred.

type BlurBehavior = 'add' | 'clear'

Value	Description
add	Add the input value as a new tag
clear	Clear the input value