reactjsantdreact-forms

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


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>
  )
}

Solution

  • 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