Collection of theme-ui and external components.
created:3/15/2021
updated:3/15/2021
source lines:40
comments %:25

Multiselect

Popover multiselect displaying checkboxes to select/unselect.

Component

import { Multiselect } from '@component-controls/components';

Overview

() => {
const [state, setState] = useState<MultiselectItem[]>([
{
label: 'option-1',
selected: true,
},
{
label: 'option-2',
selected: false,
},
{
label: 'option-3',
selected: false,
},
]);
return (
<Multiselect
items={state}
onChange={item => {
setState(
state.map(i => (i === item ? { ...i, selected: !i.selected } : i)),
);
}}
>
<Button>open</Button>
</Multiselect>
);
}

Properties

Name
Description
Default
MultiselectOwnProps (2 properties)
items

array of items to select from

MultiselectItem[]
-
onChange

function called when the selected state of an item changes

(item: MultiselectItem) => void
-
TooltipTriggerProps (15 properties)
PopoverOwnProps (1 properties)

External dependencies

package
imports
peer
react
^17.0.1
FC
*
theme-ui
^0.6.0-alpha.7
jsxLabelCheckboxBox

Internal dependencies

file
imports
"../Popover"
PopoverPopoverProps

Component JSX