Drawers

FormDrawer

The FormDrawer component is a Drawer that is used for adding/editing information. It is a wrapper around the Drawer component that provides a title, footer buttons, and a ref to the drawer's Form.

Result

Loading...

Live Editor

function Example() { const [show, setShow] = React.useState(false); return ( <> <Button onClick={() => setShow(true)}>Toggle</Button> <FormDrawer drawerProps={{ show, onHide: () => setShow(false) }} formProps={{ onSubmit: (values) => { console.log(values); setShow(false); }, }} renderContent={() => ( <> <FormField> <TextField name="test" label="Text Field" /> </FormField> </> )} /> </> ); }

function Example() {
    const [show, setShow] = React.useState(false);

    return (
        <>
            <Button onClick={() => setShow(true)}>Toggle</Button>

            <FormDrawer
                drawerProps={{ show, onHide: () => setShow(false) }}
                formProps={{
                    onSubmit: (values) => {
                        console.log(values);
                        setShow(false);
                    },
                }}
                renderContent={() => (
                    <>
                        <FormField>
                            <TextField name="test" label="Text Field" />
                        </FormField>
                    </>
                )}
            />
        </>
    );
}

Props