Select Field

type SelectFieldStructure = {
    type: 'select';
    optionsList: (trackedFieldValue: any) => {
        label: string;
        value: any;
        isDisabled?: boolean;
        [key: string]: any;
    }[];
    fieldToTrack?: FieldTrackerInterface;
    conditionalRender?: {
        conditionalFields: ConditionalType[];
        conditionalRulesChainOption?: 'AND' | 'OR';
    };
    fieldWrapperProperties?: JSX.IntrinsicElements['div'];
    fieldLabel?: (name: string) => ReactNode;
    placeholder?: string;
    validations?: Validation;
    ariaRequired?: boolean;
    disabled?: boolean;
} & DropdownProps

Live Editor

// You can play with code, with HTML tags and text as much as you want! async function onSubmit(values, form, callback) { await(300); alert(JSON.stringify(values)); } const selectOptions = () => [ { label: 'Pizza', value: 'pizza' }, { label: 'Burger', value: 'burger' }, { label: 'Taco', value: 'taco' }, ] const schema: FormSchema = { selectExample: { type: 'select', placeholder: 'Select favourite food', fieldWrapperProperties: { className: 'mb-2' }, optionsList: selectOptions }, multiSelectExample: { type: 'select', fieldWrapperProperties: { className: 'mb-2' }, optionsList: selectOptions isMulti: true, } } render ( <FormWrapper schema={schema} onSubmit={onSubmit} > <Button type='submit' scheme='primary'> Submit </Button> </FormWrapper> )

// You can play with code, with HTML tags and text as much as you want!
async function onSubmit(values, form, callback) {
    await(300);
    alert(JSON.stringify(values));
}
const selectOptions = () => [
    { label: 'Pizza', value: 'pizza' },
    { label: 'Burger', value: 'burger' },
    { label: 'Taco', value: 'taco' },
]
const schema: FormSchema = {
    selectExample: {
        type: 'select',
        placeholder: 'Select favourite food',
        fieldWrapperProperties: { className: 'mb-2' },
        optionsList: selectOptions
    },
    multiSelectExample: {
        type: 'select',
        fieldWrapperProperties: { className: 'mb-2' },
        optionsList: selectOptions
        isMulti: true,
    }
}
render (
     <FormWrapper
        schema={schema}
        onSubmit={onSubmit}
    >
        <Button type='submit' scheme='primary'>
            Submit
        </Button>
    </FormWrapper>
)

Result