Input

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

Password

Disabled

Available props

Toggle to update the preview

Disabled state

disabled: true

Read only

readOnly: true

Invalid

aria-invalid: true

Prop reference

Auto-generated from the component source

Input

className
type

React.ComponentProps<"input">

Code

// owner: Sona
"use client";

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function InputExample() {
  return (
    <div className="flex flex-col gap-4">
      <div className="space-y-2">
        <Label htmlFor="email">Email</Label>
        <Input id="email" type="email" placeholder="you@example.com" />
      </div>
      <div className="space-y-2">
        <Label htmlFor="password">Password</Label>
        <Input id="password" type="password" placeholder="••••••••" />
      </div>
      <div className="space-y-2">
        <Label htmlFor="disabled">Disabled</Label>
        <Input id="disabled" disabled defaultValue="Cannot edit" />
      </div>
    </div>
  );
}

Input

Component preview

On this page

Command Palette