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