KeyboundForm - Admin Components

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
1import {2  Form,3  KeyboundForm,4} from "@medusajs/dashboard/components"5import { Button, Input } from "@medusajs/ui"6import { useForm } from "react-hook-form"7
8const BrandForm = () => {9  const form = useForm({10    defaultValues: {11      name: "",12    },13  })14
15  const handleSubmit = form.handleSubmit(async (data) => {16    console.log(data)17  })18
19  return (20    <Form {...form}>21      <KeyboundForm onSubmit={handleSubmit}>22        <Form.Field23          control={form.control}24          name="name"25          render={({ field }) => (26            <Form.Item>27              <Form.Label>Name</Form.Label>28              <Form.Control>29                <Input {...field} />30              </Form.Control>31              <Form.ErrorMessage />32            </Form.Item>33          )}34        />35        <Button type="submit">Save</Button>36      </KeyboundForm>37    </Form>38  )39}

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:

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