SelectPicker

For a single data selection, support grouping.

Import

MainIndividual
import { SelectPicker } from 'rsuite';

Examples

Basic

With a label

Appearance

Size

Block

Loading state

When the picker is loading, a spinner is displayed to indicate the loading state. Clicking a loading picker won't open its options menu.

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 and read only

Disable Search

Async

Container and prevent overflow

Controlled

Virtualize Long Lists

Infinite loader

Accessibility

ARIA properties

  • SelectPicker 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.

Keyboard interactions

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

Props

<SelectPicker>

Property Type (Default) Description
appearance '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 | (() => HTMLElement) Sets the rendering container
data * ItemDataType[] Selectable data
defaultValue ValueType Default value
disabled boolean Whether or not component is disabled
disabledItemValues ValueType[] Disable optional
groupBy string Set grouping criteria 'key' in 'data'
label ReactNode A label displayed at the beginning of toggle button
labelKey string ('label') Set options to display the 'key' in 'data'
listProps ListProps Properties of virtualized lists.
loading boolean (false) Whether to display a loading state indicator
locale PickerLocaleType Locale text
menuMaxHeight number (320) Set the max height of the 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: ValueType, event) => void callback function when value changes
onClean (event) => 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: ValueType, item: ItemDataType, event) => void option is clicked after the selected callback function
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
renderMenu (menu:ReactNode) => ReactNode Customizing the Rendering Menu list
renderMenuGroup (groupTitle:ReactNode, item: ItemDataType) => ReactNode Custom Render Options Group
renderMenuItem (label:ReactNode, item: ItemDataType) => ReactNode Custom Render Options
renderValue (value: ValueType, item: ItemDataType, selectedElement:ReactNode) => ReactNode Custom Render selected options
searchBy (keyword:string, label:ReactNode, item: ItemDataType) => boolean Custom search rules
searchable boolean (true) Whether you can search for options.
size 'lg' | 'md' | 'sm' | 'xs' ('md') A picker can have different sizes
sort (isGroup: boolean) => (a: any, b: any) => number Sort options
toggleAs ElementType ('a') You can use a custom element for this component
value ValueType Value (Controlled)
valueKey string ('value') Set option value 'key' in 'data'
virtualized boolean Whether using Virtualized List
caretAs ElementType Custom component for the caret icon

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';

ts: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;
}

ts:ValueType 

type ValueType = string | number;
Vercel banner