how to make antd-form-builder select field searchable (react)?

Andish 0
Viewed 14

I am trying to create a form using antd-form-builder how can I make its select field searchable?

import React from 'react'
import { Form, Button } from 'antd'
import FormBuilder from 'antd-form-builder'

export default () => {
  const [form] = Form.useForm()

  const meta = {
    columns: 2
    fields: [
      { key: 'select', label: 'Select', widget: 'select', options: ['Apple', 'Orange', 'Banana'] },
    ]

return (
    <Form form={form}>
      <FormBuilder meta={meta} form={form} />
      <Form.Item className="form-footer">
        <Button htmlType="submit" type="primary">
          Submit
        </Button>
      </Form.Item>
    </Form>
  )
}
react-forms antd reactjs
1 Answers

Since each field in antd-form-builder is a widget, you can pass all the select props that for that particular by passing widgetProps as prop.

For example, to make select widget/field as searchable, you can pass showSearch: true.

const meta = {
    columns: 2,
    fields: [
      {
        key: "select",
        label: "Select",
        widget: "select",
        options: ["Apple", "Orange", "Banana"],
        widgetProps: { showSearch: true },
      },
    ],
  };

You can follow the antd documentation to check what type of props you can pass to select field.

Antd Select Props API

Muhammad Nouman Rafique0
Related