Help

KeyboundForm - Admin Components

Note: This component is available since Medusa v2.21.0.

The KeyboundForm component is a form element that submits only when the user presses ⌘+Enter. The Medusa Admin uses it in its modals and drawers so that pressing Enter in a field doesn't submit the form by accident.

Code
import { KeyboundForm } from "@medusajs/dashboard/components"

Example#

Use KeyboundForm in place of a native form element inside a Form component, as shown in the Forms guide:

Code
import {
  Form,
  KeyboundForm,
} from "@medusajs/dashboard/components"
import { Button, Input } from "@medusajs/ui"
import { useForm } from "react-hook-form"

const BrandForm = () => {
  const form = useForm({
    defaultValues: {
      name: "",
    },
  })

  const handleSubmit = form.handleSubmit(async (data) => {
    console.log(data)
  })

  return (
    <Form {...form}>
      <KeyboundForm onSubmit={handleSubmit}>
        <Form.Field
          control={form.control}
          name="name"
          render={({ field }) => (
            <Form.Item>
              <Form.Label>Name</Form.Label>
              <Form.Control>
                <Input {...field} />
              </Form.Control>
              <Form.ErrorMessage />
            </Form.Item>
          )}
        />
        <Button type="submit">Save</Button>
      </KeyboundForm>
    </Form>
  )
}

The user can still submit the form by clicking the submit button. When the user presses Enter in a field, KeyboundForm prevents the default submission. In a textarea, pressing Enter inserts a new line instead.

Props#

KeyboundForm accepts the same props as a native form element, including the following:

onSubmit(event: React.FormEvent<HTMLFormElement>) => voidOptional

The function to execute when the user submits the form. KeyboundForm prevents the event's default behavior before calling it.

onKeyDown(event: React.KeyboardEvent<HTMLFormElement>) => voidOptional

A custom key down handler. If you pass this prop, it replaces the default handler, so the keyboard shortcut no longer submits the form.

childrenReact.ReactNodeOptional

The form's content, such as its fields and submit button.

KeyboundForm also accepts every other attribute of a native form element, such as id, className, and noValidate.

Was this page helpful?