폼과 선택@neumorphism-ui/input

Input

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

@neumorphism-ui/input

Registry JSON

미리보기

이메일

오류 상태

비활성

설치

npx shadcn@latest add @neumorphism-ui/input

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

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

Import

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

Example

<div className="grid gap-2">
  <Label htmlFor="email">이메일</Label>
  <Input
    id="email"
    name="email"
    type="email"
    placeholder="you@example.com"
    autoComplete="email"
  />
</div>

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`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을 활성화합니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성