TagPicker

Multi-select by tag and support new options

Import 

import { TagPicker } from 'rsuite';

// or
import TagPicker from 'rsuite/TagPicker';

Examples

Default

Size

Block

Group

Creatable

Custom

Disabled and read only

Async

Accessibility

Learn more in Accessibility.

Props

<TagPicker>

Property Type(Default) Description
cacheData ItemDataType[] Option to cache value when searching asynchronously
classPrefix string ('picker') The prefix of the component CSS class
cleanable boolean (true) Whether the selected value can be cleared
container HTMLElement | (() => HTMLElement) Sets the rendering container
creatable boolean Settings can create new options
data * ItemDataType[] The data of component
defaultValue string[] Default values of the selected items
disabled boolean Whether disabled component
disabledItemValues string[] Disable item by value
groupBy string Set group condition key in data
labelKey string ('label') Set label key in data
listProps ListProps List-related properties in react-virtualized
locale PickerLocaleType Locale text
menuMaxHeight number (320) The max height of Dropdown
menuClassName string A css class to apply to the Menu DOM node.
menuStyle CSSProperties A style to apply to the Menu DOM node.
onChange (value:string[], event) => void Callback fired when value change
onClean (event) => void Callback fired when value clean
onClose () => void Callback fired when close component
onCreate (value: string[], item: ItemDataType, event) => void Callback fired when a new option is created
onEnter () => void Callback fired before the overlay transitions in
onEntered () => void Callback fired after the overlay finishes transitioning in
onEntering () => void Callback fired as the overlay begins to transition in
onExit () => void Callback fired right before the overlay transitions out
onExited () => void Callback fired after the overlay finishes transitioning out
onExiting () => void Callback fired as the overlay begins to transition out
onGroupTitleClick (event) => void Callback fired when click the group title
onOpen () => void Callback fired when open component
onSearch (searchKeyword:string, event) => void Callback fired when search
onSelect (value:string[], item: ItemDataType , event) => void Callback fired when item is selected
open boolean Whether open the component
placeholder ReactNode ('Select') Setting placeholders
placement Placement('bottomStart') The placement of component
preventOverflow boolean Prevent floating element overflow
renderExtraFooter () => ReactNode Custom render extra footer
renderMenuGroup (groupTitle: ReactNode, item: ItemDataType) => ReactNode Custom render menu group
renderMenuItem (label:ReactNode, item: ItemDataType) => ReactNode Custom render menu items
renderValue (value: string[], items:ItemDataType[], tags:ReactNode[]) => ReactNode Custom render selected items
searchBy (keyword: string, label: ReactNode, item: ItemDataType) => boolean Custom search rules
searchable boolean (true) Whether dispaly search input box
size 'lg' | 'md' | 'sm' | 'xs' ('md') A picker can have different sizes
sort (isGroup: boolean) => (a: any, b: any) => number Sort options
tagProps TagProps Set the props of the Tag
toggleAs ElementType ('a') You can use a custom element for this component
trigger 'Enter' | 'Space' | 'Comma' ('Enter') Set the trigger for creating tags
value string[] Specifies the values of the selected items (Controlled)
valueKey string ('value') Set value key in data
virtualized boolean Whether using Virtualized List

ts:ItemDataType 

interface ItemDataType {
  /** The value of the option corresponds to the `valueKey` in the data. **/
  value: string;

  /** 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?: ItemDataType[];

  /**
   * 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;
}

ts:Placement 

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