HandleInput - Admin Components

The HandleInput component is a text input with a leading slash, which shows the user that the value is a URL segment. The Medusa Admin uses it in the forms of records that have a handle, such as products, collections, and categories.

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

Example#

Use HandleInput as the control of a Form field, as shown in the Forms guide:

Code
1import {2  Form,3  HandleInput,4} from "@medusajs/dashboard/components"5
6const HandleField = ({ control }) => {7  return (8    <Form.Field9      control={control}10      name="handle"11      render={({ field }) => (12        <Form.Item>13          <Form.Label14            optional15            tooltip="Used in the brand's URL."16          >17            Handle18          </Form.Label>19          <Form.Control>20            <HandleInput {...field} />21          </Form.Control>22          <Form.ErrorMessage />23        </Form.Item>24      )}25    />26  )27}

The slash is decorative, so the field's value doesn't include it.

Props#

HandleInput accepts the same props as the Input UI component, including the following:

HandleInput also accepts every other prop of the Input component, such as size and id, along with the attributes of a native input element.