<VariableSelect> is a component that displays a select box for entering values into a variable declared with the variable() function.

export const selectValue = variable();

<VariableSelect variable={selectValue} withClearButton>
  <VariableSelectGroup>
    <VariableSelectLabel>NA</VariableSelectLabel>
    <VariableSelectItem value="ca">Canada</VariableSelectItem>
    <VariableSelectItem value="us">United States</VariableSelectItem>
  </VariableSelectGroup>
  <VariableSelectGroup>
    <VariableSelectLabel>APAC</VariableSelectLabel>
    <VariableSelectItem value="cn">China</VariableSelectItem>
    <VariableSelectItem value="kr">Korea</VariableSelectItem>
    <VariableSelectItem value="jp">Japan</VariableSelectItem>
  </VariableSelectGroup>
</VariableSelect>

​
Properties

variable
Variable
required

Variable to bind the select box value

placeholder
string

Placeholder text

withClearButton
boolean

Display a clear button

​
VariableSelectItem

<VariableSelectItem is a component for adding <VariableSelect> option.

<VariableSelect variable={selectValue} withClearButton>
  <VariableSelectItem value="ca">Canada</VariableSelectItem>
</VariableSelect>

​
プロパティ

value
string
required

The value to be set in the variable

​
VariableSelectItems

<VariableSelectItems> is a component for adding several <VariableSelectItem> together.

Pass an array of objects or the return value of getJson.

// 1. Passing object array
<VariableSelect variable={selectValue} withClearButton>
  <VariableSelectItems 
    items={[
      { value: 'ca', label: 'Canada' },
      { value: 'us', label: 'United States' },
    ]}
    valueKey="value"
    labelKey="label"
  />
</VariableSelect>

// 2. Passing return value from getJson
export const countries = getJson({
  alias: 'country_list_py',
});

<VariableSelect variable={selectValue} withClearButton>
  <VariableSelectItems items={countries} valueKey="code" labelKey="name" />
</VariableSelect>

​
プロパティ

items
Array<{ [key: string]: string }> | ReturnType<getJson>
required

Array of objects or the return value of getJson

valueKey
string

Key to get the value of the option from the object in items

labelKey
string

Key to get the label of the option from the object in items

​
その他のコンポーネント

  • <VariableSelectGroup> … Grouped select box elements.
  • <VariableSelectLabel> … he label of the group.
  • <VariableSelectSeparator> … Separator line inserted between the choices in the select box.
<VariableDatePicker />