Select​

The Select UI component allows customers to select an option from a dropdown list. When you set four or more options, consider using this component to avoid overwhelming the UI with too much information.

Preview​

Code example​

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

The label for the component.

options​

A list of options that the customer can select.

id?​

A unique identifier for the UI component.
If this property is not set, the system will automatically generate a globally unique ID for this component.

name?​

The name of the component.

value?​

The option that the customer selects. This value must be one of the values provided in the options property.

required?​

Indicates whether the property needs a value. Valid values are:

• true: The field needs a value.
• false: The field does not need a value.

This property is intended to add semantic meaning but does not automatically trigger an error. To display an error when the property is empty, use the error property.

disabled?​

Indicates whether the option can be changed. Valid values are:

• true: Cannot be changed.
• false: Can be changed.

readonly?​

Indicates whether the field is read-only. Valid values are:

• true: The field is read-only.
• false: The field is editable.

error?​

The error message displayed to the customer. If this property is configured, the component will be highlighted in red and show the error message.

autocomplete?​

The autocomplete attribute can be a boolean or an Autocomplete object, and it controls whether suggestions are shown for the field content.
When set to true, the browser will use stored data to automatically fill the field; when set to false, the content will never be saved.
Note that in some browsers, the autocomplete feature may not default to off, so do not overly rely on the default behavior when no value is provided. Alternatively, you can provide an Autocomplete object to specify particular data you want to be input in this field.

onChange?​

The callback triggered when the selected option is changed.
This callback accepts the value provided in the option property.

labelPosition?​

The position of label. Valid values are:

• inside: Displayed internally
• inline: Not displayed
• outside: Displayed externally

placeholder?​

The placeholder text.

Type descriptions​

Option​

Autocomplete​

AutocompleteGroup​

AutocompleteField​

Refer to autofill field.