Introduce MultiSelectField (#574)

mkdocs.yml

@@ -103,6 +103,7 @@ nav:
       - Inputs:
           - CheckBoxField: 'components/CheckboxField/README.md'
           - FileInputField: 'components/FileInputField/README.md'
+          - MultiSelectField: 'components/MultiSelectField/README.md'
           - Radio: 'components/Radio/README.md'
           - SelectField: 'components/SelectField/README.md'
           - TextArea: 'components/TextArea/README.md'

src/components/FormLayout/README.md

@@ -49,14 +49,16 @@ there are longer validation messages or help texts.
 
 The FormLayout supports buttons and all React UI form fields:
 [Button](/components/Button), [CheckboxField](/components/CheckboxField),
-[FileInputField](/components/FileInputField), [Radio](/components/Radio),
+[FileInputField](/components/FileInputField),
+[MultiSelectField](/components/MultiSelectField), [Radio](/components/Radio),
 [SelectField](/components/SelectField), [TextArea](/components/TextArea),
 [TextField](/components/TextField), and [Toggle](/components/Toggle).
 
 ```docoff-react-preview
 React.createElement(() => {
   const [fieldLayout, setFieldLayout] = React.useState('horizontal');
   const [fruit, setFruit] = React.useState('apple');
+  const [preferredFruits, setPreferredFruits] = React.useState(['apple']);
   const [isDeliveryAddress, setIsDeliveryAddress] = React.useState(true);
   const [receiveNewsletter, setReceiveNewsletter] = React.useState(true);
   const options = [
@@ -137,6 +139,12 @@ React.createElement(() => {
           options={options}
           value={fruit}
         />
+        <MultiSelectField
+          label="Fruits to order"
+          onChange={(value) => setPreferredFruits(value)}
+          options={options}
+          value={preferredFruits}
+        />
         <TextArea
           fullWidth
           label="Message"

src/components/InputGroup/InputGroup.jsx

@@ -139,6 +139,7 @@ InputGroup.propTypes = {
   /**
    * Supported elements to be grouped:
    * * `Button`
+   * * `MultiSelectField`
    * * `SelectField`
    * * `TextField`
    *

src/components/InputGroup/README.md

@@ -64,15 +64,89 @@ See [API](#api) for all available options.
   make use of its built-in features like disabling all nested inputs or pairing
   the group with a form outside. Consult [the MDN docs][fieldset] to learn more.
 
-- InputGroup currently **supports grouping of**
-  [TextField](/components/TextField), [SelectField](/components/SelectField),
-  [FileInputField](/components/FileInputField), and [Button](/components/Button)
-  components.
-
 - To group [Buttons](/components/Button) only, use the
   [ButtonGroup](/components/ButtonGroup) component which is designed
   specifically for that purpose.
 
+## Supported Form Fields
+
+The InputGroup supports buttons and the following React UI form fields:
+[Button](/components/Button), [FileInputField](/components/FileInputField),
+[MultiSelectField](/components/MultiSelectField),
+[SelectField](/components/SelectField), and [TextField](/components/TextField).
+
+```docoff-react-preview
+React.createElement(() => {
+  const [fruit, setFruit] = React.useState('apple');
+  const [countries, setCountries] = React.useState(['cz']);
+  const options = [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      label: 'Pear',
+      value: 'pear',
+    },
+    {
+      label: 'Cherry',
+      value: 'cherry',
+    },
+  ];
+  const countryOptions = [
+    {
+      label: 'Czech Republic',
+      value: 'cz',
+    },
+    {
+      label: 'Poland',
+      value: 'pl',
+    },
+    {
+      label: 'Slovakia',
+      value: 'sk',
+    },
+  ];
+  return (
+    <FormLayout>
+      <InputGroup label="TextField">
+        <TextField
+          label="Variety"
+          placeholder="Eg. Golden delicious"
+        />
+        <Button label="Submit" />
+      </InputGroup>
+      <InputGroup label="SelectField">
+        <SelectField
+          label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
+          options={options}
+          value={fruit}
+        />
+        <Button label="Submit" />
+      </InputGroup>
+      <InputGroup label="MultiSelectField">
+        <MultiSelectField
+          label="Countries of origin"
+          onChange={(value) => setCountries(value)}
+          options={countryOptions}
+          value={countries}
+        />
+        <Button label="Submit" />
+      </InputGroup>
+      <InputGroup label="FileInputField">
+        <FileInputField
+          id="supported-form-fields-attachment"
+          label="Attachment"
+          onFilesChanged={() => {}}
+        />
+        <Button label="Submit" />
+      </InputGroup>
+    </FormLayout>
+  );
+})
+```
+
 ## Sizes
 
 All existing field and button sizes are also available on the input group level: