Tags Input

Displays a tags input field.

Tags Input

Example

<div id="demo"></div>

import React from 'react';
import {render} from 'react-dom';
import TagsInput from '@jetbrains/ring-ui/components/tags-input/tags-input';

function dataSource() {
  return new Promise(resolve => setTimeout(resolve, 200)).
    then(
      () => Promise.resolve(
        [...Array(20)].
          map((it, index) => ({key: `test${index}`, label: `test${index}`}))
      )
    );
}

render(<TagsInput
  className="test-additional-class"
  tags={[
    {key: 'test1', label: 'test1'},
    {key: 'test2', label: 'test2'}
  ]}
  maxPopupHeight={250}
  dataSource={dataSource}
  allowAddNewTags
  filter
/>, document.getElementById('demo'));

Tags Input with icons

Example

<div id="demo"></div>

import React from 'react';
import {render} from 'react-dom';
import TagsInput from '@jetbrains/ring-ui/components/tags-input/tags-input';
import {
  CheckmarkIcon,
  ExceptionIcon,
  FrownIcon
} from '@jetbrains/ring-ui/components/icon';

const tags = [
  {key: 'test1', label: 'test1', rgTagIcon: CheckmarkIcon},
  {key: 'test2', label: 'test2'}
];

function dataSource(query) {
  return [
    {key: 'test3', label: 'test3', rgTagIcon: ExceptionIcon, rgTagTitle: 'I am the tag title'},
    {key: 'test4', label: 'test4', rgTagIcon: FrownIcon}
  ];
}

render(<TagsInput
  tags={tags}
  dataSource={dataSource}
/>, document.getElementById('demo'));

Disabled Tags Input

Example

<div id="demo"></div>

import React from 'react';
import {render} from 'react-dom';
import TagsInput from '@jetbrains/ring-ui/components/tags-input/tags-input';

render(<TagsInput
  disabled
  tags={[{key: 'test2', label: 'test2'}]}
  dataSource={() => []}
/>, document.getElementById('demo'));

Tags Input with too long tag labels

Example

<div id="demo" style="width: 100px;"></div>

import React from 'react';
import {render} from 'react-dom';
import TagsInput from '@jetbrains/ring-ui/components/tags-input/tags-input';

const tags = [
  {key: 'test1', label: 'Label'},
  {key: 'test2', label: 'Very long label'}
];

function dataSource(query) {
  return [
    {key: 'test3', label: 'Very very long label'},
    {key: 'test4', label: 'Very very very long label'}
  ];
}

render(<TagsInput
  tags={tags}
  dataSource={dataSource}
/>, document.getElementById('demo'));