Input

이메일, 비밀번호, 이름처럼 짧은 값을 입력할 때 사용합니다. 여러 줄 텍스트에는 Textarea를 사용하세요.

미리보기

기본·오류·비활성 입력

예시 주소가 있는 이메일, 명시적인 오류 값, 비활성 워크스페이스 입력을 비교합니다.

이메일

오류 상태

비활성

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/input

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

기본·오류·비활성 입력

npx shadcn@latest add @neumorphism-ui/input @neumorphism-ui/label

Registry JSON

사용법

id와 htmlFor로 보이는 Label을 연결하고 용도에 맞는 type, name, autoComplete를 설정하세요. 도움말이나 오류 메시지는 aria-describedby로 연결합니다.

"use client";

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

export default function Example() {
  const id = useId();
  return (
    <div className="grid gap-2">
      <Label htmlFor={id}>Email</Label>
      <Input id={id} name="email" type="email" autoComplete="email" placeholder="you@example.com" />
    </div>
  );
}

API 레퍼런스

native input의 모든 속성을 전달하며 뉴모피즘 inset 표면, file input, disabled, aria-invalid 상태를 일관되게 표현합니다.

컴포넌트	속성	타입	기본값	설명
`Input`	`type`	`React.HTMLInputTypeAttribute`	`"text" (browser default)`	email, password, file 등 native input 유형입니다.
`Input`	`value / defaultValue`	`string \| number`	`—`	controlled 또는 초기 uncontrolled 값입니다.
`Input`	`placeholder`	`string`	`—`	값의 형식을 보조하는 짧은 예시입니다.
`Input`	`disabled / required / readOnly`	`boolean`	`false`	native 입력 제약을 설정합니다.
`Input`	`aria-invalid`	`boolean \| string`	`—`	오류 상태의 테두리와 focus ring을 활성화합니다.

미리보기

기본·오류·비활성 입력

설치

사용법

API 레퍼런스

접근성