import { ComponentExample } from "@/components/ComponentExample" import { ComponentReference } from "@/components/ComponentReference"

export const metadata = { title: Input, }

{metadata.title}

A component that renders a form input field using Medusa's design system.

In this guide, you'll learn how to use the Input component.

Usage

import { Input } from "@medusajs/ui"

<Input placeholder="Placeholder" id="input-id" />

API Reference

Examples

Password

Search

Disabled

Small Size

Controlled

Error State

You can leverage the native aria-invalid property to show an error state on your input: