SelectPicker

For a single data selection, support grouping.

  • <SelectPicker>

Usage

import { SelectPicker } from 'rsuite';

Examples

Default

Appearance

Size

Block

Group

Placement

Tip: When set to auto*, try to scroll the page, or change the browser size, it will automatically appear in the right place.

Custom Option

Disabled

Disable Search

Async

Container and prevent overflow

Controlled

Props

<SelectPicker>

Property Type (Default) Description
appearance enum: 'default', 'subtle' ('default') Set picker appearence
block boolean Blocking an entire row
classPrefix string ('picker') The prefix of the component CSS class
cleanable boolean (true) Whether the option can be emptied.
container HTMLElement or (() => HTMLElement) Sets the rendering container
data * Array<DataItemType> Selectable data
defaultValue string Default value
disabled boolean Whether or not component is disabled
disabledItemValues string[] Disable optional
groupBy string Set grouping criteria 'key' in 'data'
labelKey string ('label') Set options to display the 'key' in 'data'
listProps listprops List-related properties in react-virtualized
maxHeight number (320) Set the max height of the Dropdown
menuClassName string A css class to apply to the Menu DOM node.
menuStyle React.CSSProperties A style to apply to the Menu DOM node.
onChange (value:string, event) => void callback function when value changes
onClean (event:SyntheticEvent) => void Callback fired when value clean
onClose () => void Close callback functions
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 Click the callback function for the group header
onOpen () => void Open callback function
onSearch (searchKeyword:string, event) => void callback function for Search
onSelect (value:string, item: DataItemType , event) => void option is clicked after the selected callback function
placeholder React.Node ('Select') Setting placeholders
placement enum: Placement('bottomStart') The placement of component
preventOverflow boolean Prevent floating element overflow
renderExtraFooter () => React.Node custom render extra footer
renderMenu (menu:React.Node) => React.Node Customizing the Rendering Menu list
renderMenuGroup (groupTitle:React.Node, item:DataItemType) => React.Node Custom Render Options Group
renderMenuItem (label:React.Node, item:DataItemType) => React.Node Custom Render Options
renderValue (value:string, item: DataItemType,selectedElement:React.Node) => React.Node Custom Render selected options
searchBy (keyword: string, label: React.ReactNode, item: ItemDataType) => boolean Custom search rules
searchable boolean (true) Whether you can search for options.
size enum: 'lg', 'md', 'sm', 'xs' ('md') A picker can have different sizes
sort (isGroup: boolean) => (a: any, b: any) => number Sort options
toggleComponentClass React.ElementType ('a') You can use a custom element for this component
value string Value (Controlled)
valueKey string ('value') Set option value 'key' in 'data'
virtualized boolean (true) Whether using Virtualized List
πŸŽ‰ v5 is released! Head to the v5 documentation to get started.