Skip Navigation
docs
next page
tags input

Tags Input

A tags input that lets you set multiple options

shadcn-ui

Installation

Run the following command 

pnpm dlx @shadext/cli add tags-input

API Reference

proptypedefaultValue
values
string[]
--
onValuesChange
(value: string[]) => void
--
placeholder
string
--
MaxItems
number
Infinity
MinItems
number
Infinity

Accessibility

The Tags Input component adheres to the WAI-ARIA design pattern. It is accessible

Keyboard Navigation

keydescription
Enter
set the value
Escape
exit the tags/exit the component
ArrowLeft
selects the next tag from the tags list
ArrowRight
selects the prev tag from the tags list
Delete/Backspace
remove the selected tag , otherwise removes the last item

Usage

import { TagsInput } from "@/components/extension/tags-input";
<TagsInput
  value={value}
  onValueChange={setValue}
  placeholder="enter your used tech"
/>

Example

Basic

"use client";
 
import { useState } from "react";
import { TagsInput } from "@/components/extension/tags-input";
const TagsInputExamle = ()=>{
  const [value , setValue] = useState([])
  return (
    <TagsInput value={value} onValueChange={setValue} >
  )
}

Form

"use client";
import { Button } from "@/components/ui/button";
import { Form, FormField, FormItem } from "@/components/ui/form";
import { TagsInput } from "@/registry/default/extension/tags-input";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import z from "zod";
 
const form = z.object({
  value: z.array(z.string()).nonempty("Please at least one item"),
});
 
type Form = z.infer<typeof form>;
const MultiSelectForm = () => {
  return (
    <Form {...tagsForm}>
      <form onSubmit={tagsForm.handleSubmit(onSubmit)} className="grid gap-2">
        <FormField
          control={tagsForm.control}
          name="value"
          render={({ field }) => (
            <FormItem>
              <TagsInput
                value={field.value}
                onValueChange={field.onChange}
                placeholder="enter your used tech"
              />
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  );
};