Input

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

<Input type="email" placeholder="Email" />

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

<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="email">
    이메일 <span className="text-destructive">*</span>
  </Label>
  <Input id="email" type="email" required />
</div>

<div className="space-y-2">
  <Label htmlFor="username">사용자명</Label>
  <Input
    id="username"
    placeholder="영문 4–20자"
    aria-describedby="username-help"
  />
  <p id="username-help" className="text-xs text-muted-foreground">
    다른 사용자가 회원님을 찾는 데 사용됩니다.
  </p>
</div>

<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input
    id="email"
    type="email"
    defaultValue="not-an-email"
    aria-invalid="true"
    aria-describedby="email-error"
  />
  <p id="email-error" className="text-xs text-destructive">
    올바른 이메일 형식이 아닙니다.
  </p>
</div>

const [value, setValue] = React.useState("");
const invalid = value.length > 0 && value.length < 4;

<Input
  value={value}
  onChange={(e) => setValue(e.target.value)}
  aria-invalid={invalid || undefined}
  aria-describedby="msg"
/>
<p id="msg" className={invalid ? "text-destructive" : "text-muted-foreground"}>
  {invalid ? "4자 이상 입력해 주세요." : `현재 ${value.length}자`}
</p>

<Input defaultValue="읽기 전용 값" readOnly />

<Input placeholder="Disabled" disabled />

<Input placeholder="Small" className="h-7 text-sm" />
<Input placeholder="Default" />
<Input placeholder="Medium" className="h-10" />
<Input placeholder="Large" className="h-12 text-base" />

<Input type="text" />
<Input type="email" />
<Input type="password" />
<Input type="number" />
<Input type="tel" />
<Input type="url" />
<Input type="search" />
<Input type="date" />
<Input type="time" />
<Input type="file" />