Skip to main content

ModalContext

The context marking that a subtree is inside a <Form>.

Import​

import { ModalContext } from '@bedrock-core/ui';

Type​

const ModalContext: Context<FormConfig | null>;

interface FormConfig {
  onSubmit?: (event: SubmitEvent) => void;
  onCancel?: (event: UiEvent) => void;
}

null — the default — means the subtree is not inside a modal.

You do not provide this yourself​

<Form> provides it once, at its own root, with the onSubmit / onCancel handlers it was given:

<Form onSubmit={values => save(values)}>
  <Toggle name={'sound'} defaultValue={true} />
  <Form.Button type={'submit'} label={'Save'} />
</Form>

Nothing below that needs to read or provide it. It exists for the build's own restriction pass, which reads it to enforce that a field such as Input only appears inside a <Form>, and that no regular <Button> or nested <Form> appears within one.

Notes​

A <Form> written inside another <Form> is refused, by the same pass this context feeds — mix the two form kinds across separate screens, never nested.

  • <Form> — the root that provides it
  • createContext — how context works in general
  • Hosts — the native modal, and what it can carry
On this page