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 

interface DataItemType {
  /** 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?: DataItemType[];

  /**
   * 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;
}
type Placement =
  | 'bottomStart'
  | 'bottomEnd'
  | 'topStart'
  | 'topEnd'
  | 'leftStart'
  | 'leftEnd'
  | 'rightStart'
  | 'rightEnd'
  | 'auto'
  | 'autoVerticalStart'
  | 'autoVerticalEnd'
  | 'autoHorizontalStart'
  | 'autoHorizontalEnd';

<TagPicker>

Property Type(Default) Description
cacheData DataItemType[] 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 * DataItemType[] 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: DataItemType , event) => void Callback fired when item is selected
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:DataItemType) => ReactNode Custom render menu group
renderMenuItem (label:ReactNode, item:DataItemType) => ReactNode Custom render menu items
renderValue (value: string[], items:DataItemType[], 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 enum: '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