@highlight-ui/tag-picker

Using npm:

npm install @highlight-ui/tag-picker

Using yarn:

yarn add @highlight-ui/tag-picker

Using pnpm:

pnpm install @highlight-ui/tag-picker

In your (S)CSS file:

@import url('@highlight-ui/tag-picker');

Once the package is installed, you can import the library:

import { TagPicker, TagInput } from '@highlight-ui/tag-picker';

Usage

import React from 'react';
import { TagPicker, TagInput } from '@highlight-ui/tag-picker';

export default function TagPickerExample() {
  return (
    <TagPicker
      options={[
        {
          value: '1',
          label: 'First tag',
        },
        {
          value: '2',
          label: 'Second tag',
        },
        {
          value: '3',
          label: 'Third tag',
        },
      ]}
      tags={[
        {
          text: 'First tag',
          interaction: 'remove',
        },
      ]}
      onTagRemove={handleRemove}
      onTagAdd={handleAdd}
      onInputChange={handleInputChange}
    />
  );
}

Props 📜

TagPickerProps and TagInputProps are heavily abstracted by the Select props. Please refer to those documentations for a more detailed view.

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.