Modal component specific to forms.

Usage

Import

import { ModalForm } from '@passfort/castle'
content_copy
Copy

Example

() => {  
  const { isOpen, onOpen, onClose } = useDisclosure()


  return <>
    <Button onClick={() => onOpen()} label="Open" />
    <ModalForm
        width="500px"
        title="Create User"
        isOpen={isOpen}
        onClose={onClose}
        renderFooter={() => (
            <Button label="Create" type="primary" />
        )}
      >
        <FormControls>
          <FormControl>
            <FormLabel>First name</FormLabel>
            <Input />
          </FormControl>

          <FormControl>
            <FormLabel>Last name</FormLabel>
            <Input />
          </FormControl>
        </FormControls>
      </ModalForm>
  </>
}
() => {  
  const { isOpen, onOpen, onClose } = useDisclosure()


  return <>
    <Button onClick={() => onOpen()} label="Open" />
    <ModalForm
        width="500px"
        title="Create User"
        isOpen={isOpen}
        onClose={onClose}
        renderFooter={() => (
            <Button label="Create" type="primary" />
        )}
      >
        <FormControls>
          <FormControl>
            <FormLabel>First name</FormLabel>
            <Input />
          </FormControl>

          <FormControl>
            <FormLabel>Last name</FormLabel>
            <Input />
          </FormControl>
        </FormControls>
      </ModalForm>
  </>
}
content_copy
Copy
live example