TagPicker #

Multi-select by tag and support new options

Import #

Examples #

Basic #

Size #

Supports four sizes: lg, md, sm, and xs.

Block #

Set the block property to make the picker fill its parent container.

Group #

Use the groupBy property to display options in groups.

Creatable #

Enable the creatable property to allow creating new options.

Custom #

Customize tag and option rendering using renderValue, renderOption, and other render props.

Disabled and Read Only #

Supports disabled to disable the entire picker, readOnly for read-only state, and disabledItemValues to disable specific options.

Async Loading #

Implement async search and loading of options using the onSearch callback.

Responsive #

On small screen devices, the selection list will be converted to a popup selector. To maintain the component's search functionality, this will only take effect when searchable={false} is set.

Accessibility #

ARIA properties #

• TagPicker has role combobox.
• Has the aria-haspopup="listbox" attribute to indicate that the combobox has a popup listbox.
• Has the aria-expanded attribute to indicate whether the listbox is open or not.
• Has the aria-controls attribute to indicate the ID of the listbox element.
• Has the aria-activedescendant attribute to indicate the ID of the focused option.
• When label is set, the aria-labelledby attribute is added to the combobox element and the listbox element and is set to the value of the id attribute of label.
• listbox has the aria-multiselectable=true attribute to indicate that the listbox is multi-selectable.

Keyboard interactions #

• ↓ - Move focus to the next option.
• ↑ - Move focus to the previous option.
• Enter - Select the focused option.
• Esc - Close the listbox.

Props #

<TagPicker> #

Option #

interface Option<V> {
  /** The value of the option corresponds to the `valueKey` in the data. **/
  value: V;

  /** The content displayed by the option corresponds to the `labelKey` in the data. **/
  label: ReactNode;

  /**
   * The data of the child option corresponds to the `childrenKey` in the data.
   * Properties owned by tree structure components, such as TreePicker, Cascader.
   */
  children?: Option<V>[];

  /**
   * Properties of grouping functional components, such as CheckPicker, InputPicker
   */
  groupBy?: string;

  /**
   * The children under the current node are loading.
   * Used for components that have cascading relationships and lazy loading of children. E.g. Cascader, MultiCascader
   */
  loading?: boolean;
}

Placement #

type Placement =
  | 'bottomStart'
  | 'bottomEnd'
  | 'topStart'
  | 'topEnd'
  | 'leftStart'
  | 'leftEnd'
  | 'rightStart'
  | 'rightEnd'
  | 'auto'
  | 'autoVerticalStart'
  | 'autoVerticalEnd'
  | 'autoHorizontalStart'
  | 'autoHorizontalEnd';

ListProps #

interface ListProps {
  /**
   * Size of a item in the direction being windowed.
   */
  itemSize?: number | ((index: number) => number);

  /**
   * Scroll offset for initial render.
   */
  initialScrollOffset?: number;

  /**
   * Called when the items rendered by the list change.
   */
  onItemsRendered?: (props: ListOnItemsRenderedProps) => void;

  /**
   * Called when the list scroll positions changes, as a result of user scrolling or scroll-to method calls.
   */
  onScroll?: (props: ListOnScrollProps) => void;
}