CheckPicker
Used for multiple data selection, support grouping.
Import
import { CheckPicker } from 'rsuite';
// or
import CheckPicker from 'rsuite/CheckPicker';Examples
Default
Select
Appearance
Default
Subtle
Size
Large
Medium
Small
Xsmall
Sticky
Set the sticky property to put the selected in the options to the top.
Kenya,Julius2
Kenya,Julius2
Block
Select
Group
Select
Sort:
Select
Placement
topStart | topEnd | ||
leftStart | rightStart | ||
leftEnd | rightEnd | ||
bottomStart | bottomEnd |
auto
autoVerticalStart
autoVerticalEnd
autoHorizontalStart
autoHorizontalEnd
Tip: When set to
auto*, try to scroll the page, or change the browser size, it will automatically appear in the right place.
Custom options
Select User
Disabled and read only
Julius1
Julius1
Julius1
Julius1
Disabled Search
Select
Extra footer
Customize a select all function.
Select
Async
Select
Container and prevent overflow
Select
Controlled
Select
Accessibility
Learn more in Accessibility.
Props
<CheckPicker>
| 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 selected value can be cleared |
| container | HTMLElement | (() => HTMLElement) | Sets the rendering container |
| data * | ItemDataType[] | The data of component |
| defaultValue | ValueType | Default values of the selected items |
| disabled | boolean | Whether disabled component |
| disabledItemValues | ValueType | 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: ValueType, event) => void | Callback fired when value change |
| onClean | (event:SyntheticEvent) => void | Callback fired when value clean |
| onClose | () => void | Callback fired when close component |
| 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: ValueType, 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 |
| renderMenu | (menu:ReactNode) => ReactNode | Customizing the Rendering Menu list |
| renderMenuGroup | (groupTitle:ReactNode, item:ItemDataType) => ReactNode | Custom render menu group |
| renderMenuItem | (label:ReactNode, item: ItemDataType) => ReactNode | Custom render menu items |
| renderValue | (value: ValueType, items: ItemDataType[], selectedElement: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 |
| sticky | boolean | Top the selected option in the options |
| toggleAs | ElementType ('a') |
You can use a custom element for this component |
| value | ValueType | Specifies the values of the selected items (Controlled) |
| valueKey | string ('value') |
Set 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:ValueType
type ValueType = (string | number)[];