select-list.md

SelectList

Source

A vertical list of radio buttons that reveal content when selected.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { SelectList } from 'chayns-components';

// ...

<SelectList {...} />

Props

The SelectList-component takes the following props:

Name	Type	Default	Required
onChange	function
defaultValue	string | number
value	string | number
children	ReactNode | Array<ReactNode>
selectFirst	boolean
className	string
style	{ [key: string]: number | string }
listId	string

onChange

onChange?: function

A callback that is invoked when the selected item changes.

---

defaultValue

defaultValue?: string | number

Specifies the SelectItem that is selected by default with its id.

---

value

value?: string | number

The currently selected SelectItem by its id.

---

children

children?: ReactNode | Array<ReactNode>

The children elements of the list. Should contain SelectItem components.

---

selectFirst

selectFirst?: boolean

Wether the first entry should be selected by default. (deprecated)

---

className

className?: string

A classname string that will be applied to the container element.

---

style

style?: { [key: string]: number | string }

A React style object

---

listId

listId?: string

The id used for the html attributes of this select list