Select

Renders an HTML select.

Select field props

      fieldType: 'select',
      allowClear: false, // Boolean. If true, the select box shows a clear icon which clears the value oif the field. See https://ember-power-select.com/docs/the-trigger for more.
      options: [], // Array of items to show in the dropdown. Items can either all be objects, or they can all be primitives, such as strings or numbers. If an array of objects is passed, then optionDisplayProp should be passed to determine which property in the object should be shown as the label of the option in the list.
      optionDisplayProp: null, // String - which property of the object to show in the list if options is an array of objects.
      optionValueProp: null, // String - which property of the object to use as the value if options is an array of objects.
      optionComponent: null, // Object with { componentClass, props }.
      // `componentClass` is the imported class of the component to show on the add clone button.
      // `props` can be included to pass state or data to the component, accessible as {{@props}}.
      // `@changesetWebform and @formField are passed to the component.
      selectedItemComponent: null, // The imported class of the component to pass to the Power Select component. See https://ember-power-select.com/docs/api-reference
      validatesOn: ['$inherited', 'valueUpdated'], // Array of strings

The above props are in addition to the generic field props shown with their default values below.

    validationRules: [], // Array of objects defining validation rules. See "Validation".
    validatesOn: ['submit', 'pushErrors'], // Array of strings, specifing the names of events which should triggger validation.
    showValidationWhenFocussed: null, // Boolean - unless this is true, validation colours, icons and messages will be omitted for as long as the "focussed" prop of a field is true. The build in input and textarea fields set focussed to true when the user focuesses the element.
    omitted: false, // Boolean - or object - if true, the field is omitted and also ignored when validating or submitting the form. Can also be an object which defines rules for dynamic omission/inclusion. See /docs/hiding-and-showing-fields.
    defaultValue: null, // Any - auto set the changeset property for the field to this value when the ChangesetWebform component is rendered and the changeset is created. This value will be overridden by a corresponding property in the data object that is passed to the ChangesetWebform component.
    labelComponent: null, // Object with { componentClass, props }.
    // If set, fieldLabel becomes null.
    // `componentClass` is the imported class of the component to show inside the field label element.
    // `props` can be included to pass state or data to the component, accessible as {{@props}}.
    // `@changesetWebform, and @formField are passed to the component.
    labelMarkdown: null, // String - a markdown string to render as HTML within the label element.
    hideLabel: null, // Boolean - Hide the label from the user
    disabled: false, // Boolean - disable the field, but do not hide it. It will still be validated [TODO check] and included when the form is submitted
    resetWhenOmitted: true, // Boolean - reset the field value and validation when the field is omitted from the form.
    attrsFromConfig: {
      classNames: {}, // Object - keys can correspond to those in the classNames settings. See /docs/configure-classnames
    },
    cloneActionsPosition: 'fieldActions', // String - where to place the remove clone button in relation to the cloned field. Can be [TODO]
    includeLabelForAttr: false, // Boolean - if true, the label element will have a 'for' attribute that matches the input element's 'id' attribute.
    isFieldset: false, // Boolean - if true, the field options are wrapped in a fieldset element, and the field label is wrapped in a legend element.
    requiresAriaLabelledBy: false, // Boolean - if true, the field will have an aria-labelledby attribute that points to the field label. This is not required if the field uses semantic element/s such as inputs or textareas, and the "for" attribute of the label correctly points to the semantic element/s.

With string options and allowClear

No country selected

import ChangesetWebform from 'react-changeset-webforms';
import { useState } from 'react';

const formSchema = {
  formSettings: {
    formName: 'selectExample1',
    hideSubmitButton: true,
  },
  fields: [
    {
      fieldId: 'country',
      allowClear: true,
      fieldType: 'select',
      fieldLabel: 'Country',
      placeholder: 'Select a country',
      options: ['South Africa', 'United Kingdom', 'United States', 'Germany'],
      validationRules: [
        {
          validationMethod: 'validatePresence',
          arguments: true,
        },
      ],
    },
  ],
};

function onUserInteraction(...args) {
  console.log(args);
}

export default function SelectExampleOne() {
  function onValueUpdate(formField, changesetWebform) {
    return updateCountry(formField.fieldValue);
  }
  const [country, updateCountry] = useState(null);
  return (
    <>
      <div data-test-id="selected-country-feedback">
        {country ? (
          <>The selected country is {country}</>
        ) : (
          <>No country selected</>
        )}
      </div>
      <ChangesetWebform
        formSchema={formSchema}
        onUserInteraction={onUserInteraction}
        onFieldValueChange={onValueUpdate}
      />
    </>
  );
}

With optionValueProp and optionDisplayProp

No country selected

import ChangesetWebform from 'react-changeset-webforms';
import { useState } from 'react';

const formSchema = {
  formSettings: {
    formName: 'selectExample2',
    hideSubmitButton: true,
  },
  fields: [
    {
      fieldId: 'country',
      fieldType: 'select',
      fieldLabel: 'Country',
      placeholder: 'Select a country',
      optionValueProp: 'value',
      optionDisplayProp: 'label',
      options: [
        { value: 'za', label: 'South Africa' },
        { value: 'gb', label: 'United Kingdom' },
        { value: 'us', label: 'United States' },
        { value: 'de', label: 'Germany' },
      ],
    },
  ],
};

function onUserInteraction(...args) {
  console.log(args);
}

export default function SelectExampleOne() {
  function onValueUpdate(formField, changesetWebform) {
    return updateCountry(formField.fieldValue);
  }
  const [country, updateCountry] = useState(null);
  return (
    <>
      <div data-test-id="selected-country-feedback">
        {country ? (
          <>The selected country code is {country}</>
        ) : (
          <>No country selected</>
        )}
      </div>
      <ChangesetWebform
        formSchema={formSchema}
        onUserInteraction={onUserInteraction}
        onFieldValueChange={onValueUpdate}
      />
    </>
  );
}