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.