@pndr/single-select-field

SingleSelectField

Used for selecting a single option from a list.

Getting started

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

<SingleSelectField
    id={'fld1'}
    contextId={'recordGalleryCard'}
    roleId={'readOnly'}
    optionId={'opt5'}
    options={{
        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'
            }
        }
    }}
    onChange={({id, optionId}) => {
       // do something 
    }}
/>

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
optionId	String		Selected option
onChange	Function		Callback invoked whenever an option get's selected: ({id: string, optionId: string}): void

More information

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