<Select> is a component for inputting values in a selection format to the state declared by the defineState() function.

import { defineState } from '@morph-data/components';

export const { category } = defineState({ category: 'book' });

<Select state={category}>
  <SelectItem value="book">Book</SelectItem>
  <SelectItem value="electronics">Electronics</SelectItem>
  <SelectItem value="office-products">Office products</SelectItem>
</Select>

​
Properties

​
state
State
required

State object to bind the input value of the component. Please specify the state declared by the defineState() function.

​
Subcomponents

​
<SelectItem />

<SelectItem> is a component for defining options within the <Select> component.

<SelectItem value="book">Book</SelectItem>
​
value
string
required

Value of the option

​
<SelectItems />

<SelectItems> is a component for defining options in bulk within the <Select> component.

There are two ways to pass values to Select Items.

  1. Specify as an array

  2. Specify an alias of a function that returns a DataFrame

<SelectItems>
  // 1. Specify as an array
  <SelectItems
    items={[
      {value: 'book', label: 'Book' },
      { value: 'electronics', label: 'Electronics' }
    ]}
    valueKey='value'
    labelKey='label'
  />

  // 2. Specify an alias of a function that returns a DataFrame
  <SelectItems loadData="get_categories" valueKey='value' labelKey='label' />
</SelectItems>
​
items
Array

Array containing the values and labels of the options. Use the valueKey and labelKey properties to specify which field is used as the value and which field is used as the label.

​
loadData
string

Alias of the Python function to retrieve the options

​
valueKey
string

Field name containing the value of the options

​
labelKey
string

Field name containing the label of the options

<DateRangePicker /><Accordion />