Help

HandleInput - Admin Components

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

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
import {
  Form,
  HandleInput,
} from "@medusajs/dashboard/components"

const HandleField = ({ control }) => {
  return (
    <Form.Field
      control={control}
      name="handle"
      render={({ field }) => (
        <Form.Item>
          <Form.Label
            optional
            tooltip="Used in the brand's URL."
          >
            Handle
          </Form.Label>
          <Form.Control>
            <HandleInput {...field} />
          </Form.Control>
          <Form.ErrorMessage />
        </Form.Item>
      )}
    />
  )
}

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:

valuestringOptional

The input's value, without the leading slash.

onChange(event: React.ChangeEvent<HTMLInputElement>) => voidOptional

The function to execute when the user changes the input's value.

placeholderstringOptional

The placeholder to show when the input is empty.

disabledbooleanOptional

Whether the input is disabled.

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

Was this page helpful?