Skip to main content

TagInput

The TagInput component allows users to input multiple tags. Users can add tags by typing in the input field and pressing the Enter or Tab key. Tags can be removed individually by clicking the remove icon next to each tag. The component supports various states, sizes, and custom styling options.

Props​

  • label: The label for the TagInput field. If provided, it displays above the input field.
  • info: Provides additional information about the field, displayed next to the label.
  • required: If true, adds an asterisk to the label, indicating the field is required.
  • hint: A hint text displayed below the input field, only when there are no tags and the state is not 'disabled'.
  • onChange: Callback function triggered when the list of tags changes. Receives the current list of tags as an argument.
  • tagValues: (Default: []) An array of initial tags to be displayed in the component.
  • size: (Default: 'md') Determines the size of the input field and tags. Accepts one of 'xs', 'sm', or 'md'.
  • placeholder: (Default: 'Add tags...') The placeholder text displayed inside the input field when it's empty.
  • className: Adds custom classes to the TagInput wrapper for additional styling.
  • state: (Default: 'default') Controls the visual state of the component. Accepts one of 'default', 'error', 'success', or 'disabled'.

Usage Example​

<TagInput
   label="Tags"
   info="Separate tags with commas"
   required
   placeholder="Enter tags"
   size="md"
   tagValues={['Tag1', 'Tag2']}
   onChange={(tags) => console.log(tags)}
   state="default"
/>

<TagInput
   label="Tags"
   hint="Press Enter to add tags"
   placeholder="Add tags..."
   size="sm"
   onChange={(tags) => console.log(tags)}
   state="error"
/>