chore: update docs

rjsf-team · Feb 11, 2022 · 4f341eb · 4f341eb
1 parent 2426145
commit 4f341eb
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 2 deletions.
diff --git a/docs/advanced-customization/custom-templates.md b/docs/advanced-customization/custom-templates.md
@@ -12,8 +12,9 @@ _ | Custom Field  | Custom Template | Custom Widget
 
 ## ArrayFieldTemplate
 
-You can use an `ArrayFieldTemplate` to customize how your arrays are rendered.
-This allows you to customize your array, and each element in the array.
+You can use an `ArrayFieldTemplate` to customize how your arrays are rendered. 
+This allows you to customize your array, and each element in the array. You can also customize arrays by specifying a widget in the relevant `ui:widget` schema, more details over on [Custom Widgets](../usage/arrays.md#custom-widgets). 
+
 
 ```jsx
 const schema = {

diff --git a/docs/advanced-customization/custom-widgets-fields.md b/docs/advanced-customization/custom-widgets-fields.md
@@ -94,6 +94,7 @@ You can provide your own custom widgets to a uiSchema for the following json dat
 - `number`
 - `integer`
 - `boolean`
+- `array`
 
 ```jsx
 const schema = {

diff --git a/docs/usage/arrays.md b/docs/usage/arrays.md
@@ -221,6 +221,44 @@ render((
 ```
 
 
+## Custom widgets
+
+In addition to [ArrayFieldTemplate](../advanced-customization/custom-templates.md#arrayfieldtemplate) you use your own widget by providing it to the providing it via uiSchema property of `ui:widget`. 
+
+Example: 
+
+```jsx
+const CustomSelectComponent = props => {
+  return (
+    <select>
+      {props.value.map((item, index) => (
+        <option key={index} id="custom-select">
+          {item}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+const schema = {
+  type: "array",
+  title: "A multiple-choice list",
+  items: {
+    type: "string",
+  },
+};
+
+const uiSchema = {
+  "ui:widget": "CustomSelect"
+};
+
+const widgets = {
+  CustomSelect: CustomSelectComponent,
+},
+
+render((<Form schema={schema} uiSchema={uiSchema} widgets={widgets} />), document.getElementById("app"));
+```
+
 ## Specifying the minimum or maximum number of items
 
 Note that when an array property is marked as `required`, an empty array is considered valid. If the array needs to be populated, you can specify the minimum number of items using the `minItems` property.