@pndr/multiple-select-field NPM

MultipleSelectField

Used for selecting multiple options from a list.

Getting started

npm install @cmds/multiple-select-field --save

<MultipleSelectField
    id={'fld1'}
    contextId={'recordGalleryCard'}
    roleId={'readOnly'}
    optionIds={['opt1', 'opt2', 'opt3', 'opt4', 'opt5', 'opt6']}
    options={{
        coloredOptions: true,
        options: ['opt1', 'opt2', 'opt3', 'opt4', 'opt5', 'opt6'],
        optionsById: {
            'opt1': {
                id: 'opt1',
                colorId: 'blue.base',
                name: 'Blue'
            },
            'opt2': {
                id: 'opt2',
                colorId: 'green.base',
                name: 'Green'
            },
            'opt3': {
                id: 'opt3',
                colorId: 'red.base',
                name: 'Red'
            },
            'opt4': {
                id: 'opt4',
                colorId: 'yellow.base',
                name: 'Yellow'
            },
            'opt5': {
                id: 'opt5',
                colorId: 'indigo.base',
                name: 'Indigo'
            },
            'opt6': {
                id: 'opt6',
                colorId: 'purple.base',
                name: 'Purple'
            }
        }
    }}
/>

Prop Types

Property	Type	Required?	Description
id	String	✓	Unique id for the instance of this field
contextId	Context	✓	The appearance will change depending on context in which the field is displayed. Valid options include: `recordDetail` or `recordGridRow` or `recordGalleryCard` or `recordListItem`
roleId	Role	✓	The behaviour changes based on the role. Valid options include `editor` or `readOnly`
options	Object	✓	Object that holds each option by it's id. Each option should have an `id`, `name`, `colorId` (optional)
optionOrder	Array	✓	Should reference all options in the preferred order
coloredOptions	Boolean	✓	Enables coloring for options
optionIds	Array		List of selected options
onLink	Function		Callback invoked whenever an option get's added to the selection: `({id: string, optionId: string}): void`
onUnlink	Function		Callback invoked whenever an option get's removed from the selection: `({id: string, optionId: string}): void`
onClear	Function		Callback invoked whenever all options get deselected: `({id: string}): void`
onSort	Function		Callback invoked whenever one of the selected options get's sorted: `({id: string, optionId: string, targetIndex: number}): void`

More information

This component is designed and developed as part of Cosmos Design System.

react-component

prop-types

@everything-registry/sub-chunk-728 @infinitebrahmanuniverse/nolb-_pn

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago