<Select />

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>

<SelectItem value="book">Book</SelectItem>

<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>