select-item.md

SelectItem

Source

A radio button that expands its content when selected. Should be used inside of a SelectList.

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 { SelectItem } from 'chayns-components';

// ...

<SelectItem {...} />

Props

The SelectItem-component takes the following props:

Name	Type	Default	Required
id	number
htmlId	string
className	string
disabled	boolean	false
children	ReactNode
name	string | ReactNode	''
value	object | array
tooltipProps	object

id

id?: number

The select item id. It identifies the SelectItem for the defaultValue- and value-props of the SelectList-component and will be given as the first argument to the onChange-callback of the SelectList-component.

---

htmlId

htmlId?: string

The html id which will be used for the input of the radio button

---

className

className?: string

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

---

disabled

disabled?: boolean

Disables any user interaction and renders the SelectItem in a disabled style.

---

children

children?: ReactNode

The items content that will be revealed when it is selected.

---

name

name?: string | ReactNode

The name of the SelectItem that is shown as a label next to its radio button.

---

value

value?: object | array

Any additional info for the item.

---

tooltipProps

tooltipProps?: object

When specified, a ToolTip-component will wrap the radio button and these props will be forwarded.