combo-box.md

ComboBox

Source

A button with a dropdown that contains a scrollable list of distinct values from which people can choose.

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

// ...

<ComboBox {...} />

Props

The ComboBox-component takes the following props:

Name	Type	Default	Required
onSelect	function
disabled	boolean	false
label	string
list	array		✓
listKey	string		✓
listValue	string		✓
className	string
defaultValue	string
stopPropagation	boolean	false
parent	function | ReactNode
style	{ [key: string]: string | number }
value	string | number

onSelect

onSelect?: function

This callback is called when an item is selected.

---

disabled

disabled?: boolean

Disables any interactions and styles the combobox with a disabled style.

---

label

label?: string

A placeholder value shown inside the combobox.

---

list

list: array;

An array of values to select from.

---

listKey

listKey: string;

The name of the property on the list objects that uniquely identifies an item.

---

listValue

listValue: string;

The name of the property on the list objects that is shown as its name.

---

className

className?: string

A classname string that will be applied to the Button component and the overlay.

---

defaultValue

defaultValue?: string

The default value of the combobox. This does not work in combination with the label or value props.

---

stopPropagation

stopPropagation?: boolean

Wether to stop the propagation of click events.

---

parent

parent?: function | ReactNode

The parent component of the combobox overlay.

---

style

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

A React style object that will be applied to the Button component and the overlay.

---

value

value?: string | number

The value of the combobox. This does not work in combination with the label-prop.