SelectList

A SelectList consists of a container element, with rows of data inside. The rows within a list may contain focusable elements or plain text content. If the list supports row selection, each row includes a selection checkbox.

SelectList can be used to select multiple items from a list simultaneously. It provides a familiar interface where users can select multiple items.

Import


import { SelectList } from '@marigold/components';

Props

SelectList

Property	Type	Default	Description
`download`	`string \| boolean \| undefined`	`none`	Causes the browser to download the linked URL. A string may be provided to suggest a file name.
`href`	`string \| undefined`	`none`	A URL to link to.
`ping`	`string \| undefined`	`none`	A space-separated list of URLs to ping when the link is followed.
`textValue`	`string \| undefined`	`none`	A string representation of the item's contents, used for features like typeahead.
`onScroll`	`(e: React.UIEvent<HTMLDivElement, UIEvent>) => void`	`none`	Handler that is called when a user scrolls.
`renderEmptyState`	`(props: GridListRenderProps) => React.ReactNode`	`none`	Provides content to display when there are no items in the list.

SelectList.Item

Property	Type	Default	Description
`dependencies`	`any[] \| undefined`	`none`	Values that should invalidate the item cache when using dynamic collections.
`disabledBehavior`	`DisabledBehavior \| undefined`	`none`	Whether disabledKeys applies to all interactions, or only selection.
`disallowEmptySelection`	`boolean \| undefined`	`false`	Whether the collection allows empty selection.
`dragAndDropHooks`	`DragAndDropHooks \| undefined`	`none`	The drag and drop hooks returned by useDragAndDrop used to enable drag and drop behavior for the GridList.
`items`	`Iterable<object> \| undefined`	`none`	Item objects in the collection.
`selectedKeys`	`"all" \| Iterable<Key> \| undefined`	`none`	The currently selected keys in the collection (controlled).
`selectionMode`	`"multiple" \| "none" \| "single" \| undefined`	`none`	The type of selection that is allowed in the collection.
`selectionBehavior`	`"replace" \| "toggle" \| undefined`	`none`	How multiple selection should behave in the collection.
`slot`	`string \| null \| undefined`	`none`	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
`ref`	`Ref<HTMLUListElement> \| undefined`	`full`	Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).
`onAction`	`(key: Key) => void`	`none`	Handler that is called when a user performs an action on an item. The exact user event depends on the collection's selectionBehavior prop and the interaction modality.
`onSelectionChange`	`(key: Key) => any`	`none`	Handler that is called when the selection changes.
`onScroll`	`(e: React.UIEvent<HTMLDivElement, UIEvent>) => void`	`none`	Handler that is called when a user scrolls.
`renderEmptyState`	`(props: GridListRenderProps) => React.ReactNode`	`none`	Provides content to display when there are no items in the list.