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

Props