Select​

Select 组件让客户从选项菜单中选择一个选项。当你有 4 个或更多选项时，可考虑使用 Select 组件，以避免界面混乱。

预览​

示例代码​

extend('Checkout::Dynamic::Render', () => {
  return <Select label='Country' value='2' options={[
    {
      value: '1',
      label: 'Australia',
    },
    {
      value: '2',
      label: 'Canada',
    },
    {
      value: '3',
      label: 'France',
    },
    {
      value: '4',
      label: 'Japan',
    },
    {
      value: '5',
      label: 'Nigeria',
    },
    {
      value: '6',
      label: 'United States',
    },
  ]} />;
});

SelectProps​

label?​

字段标签。

options​

客户可以选择的选项。

id?​

用于标识当前组件的唯一标识符。如果未设置 ID，则会使用全局唯一值，全局唯一值为组件内部自行创建的 ID。

name?​

当前组件的名称标识。

value?​

选择的选项。应该匹配 options 中的一个 value 属性。

required?​

字段是否需要值。true 为需要，false 为不需要。该字段旨在添加语义值，不会自动出现错误提示。如果要在该字段为空时显示错误，可以使用 error 属性。

disabled?​

是否可以更改选择。true 为不可更改，false 为可更改。

readonly?​

字段是否只读。true 为只读，false 为可编辑。

error?​

向客户展示的错误信息。若配置该传参，组件将会标红显示，并展示错误信息。

autocomplete?​

控制字段内容的提示是否显示。当设置为 true 时，表示该字段使用浏览器记录的内容进行自动填充。当设置为 false 时，表示永远不保存内容。注意在某些浏览器下自动填充功能无法保证默认关闭状态，因此不要过度依赖不传值时的默认表现。或者，你可以提供一个 Autocomplete 对象，配置你希望在此字段中输入的特定数据。

onChange?​

每当所选选项更改时运行的回调。此回调使用所选 option 的字符串 value 调用。

labelPosition?​

设置 label 的位置，配置 inside 时为内部，配置 inline 时不显示，配置 outside 时为外部。

placeholder?​

提示文案。

类型说明​

Option​

Autocomplete​

AutocompleteGroup​

AutocompleteField​

参考 autofill field。