@highlight-ui/tag-picker
v4.3.19
Published
TagPicker component for Highlight UI library
Downloads
2,725
Maintainers
Keywords
Readme
@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.