입력

import {
  Field,
  FieldDescription,

Input은 이름, 이메일, 검색어처럼 한 줄 텍스트를 받습니다. 네이티브 <input> 위의 얇은 래퍼인 Base UI Input 컴포넌트를 기반으로 하며, 두꺼운 테두리, 선명한 그림자, 대비 높은 포커스 아웃라인으로 네오브루탈리즘 공식을 입혔습니다.

다음과 같은 경우에 사용합니다.

• 인증·가입 폼 — Field와 FieldLabel과 짝지은 이메일, 사용자 이름, 비밀번호 필드.
• 검색 바 — Button과 나란히, 또는 InputGroup으로 아이콘을 붙입니다.
• 결제·설정 페이지 — FieldGroup에 배치한 주소, 카드 번호, 프로필 필드.

설치#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/input.json
npx shadcn@latest add https://neobrutalism.com/r/base/input.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/input.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/input.json
복사

import * as React from "react"

import { cn } from "@/lib/utils"

function Input({ className, type, ...props }: React.ComponentProps<"input">) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        "h-8 w-full min-w-0 rounded border-2 bg-input px-3 py-2 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive",
        className
      )}
      {...props}
    />
  )
}

export { Input }

사용법#

복사import { Input } from "@/components/ui/input"

복사<Input />

예제#

기본#

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

export function InputBasic() {

Field#

Field, FieldLabel, FieldDescription를 사용해서 라벨과 설명이 있는 입력을 만듭니다.

import {
  Field,
  FieldDescription,

Field Group#

FieldGroup을 사용해서 여러 개의 Field 블록을 표시하고 폼을 구성합니다.

import { Button } from "@/components/ui/button"
import {
  Field,

비활성화#

disabled prop을 사용해서 입력을 비활성화합니다. 비활성화 상태의 스타일을 지정하려면 Field 컴포넌트에 data-disabled 속성을 추가합니다.

import {
  Field,
  FieldDescription,

오류 상태#

aria-invalid prop을 사용해서 입력을 오류 상태로 표시합니다. 오류 상태의 스타일을 지정하려면 Field 컴포넌트에 data-invalid 속성을 추가합니다.

import {
  Field,
  FieldDescription,

파일#

type="file" prop을 사용해서 파일 입력을 만듭니다.

import {
  Field,
  FieldDescription,

인라인#

Field에 orientation="horizontal"을 지정해서 인라인 입력을 만듭니다. Button과 조합하면 버튼이 있는 검색 입력을 만들 수 있습니다.

import { Button } from "@/components/ui/button"
import { Field } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

그리드#

그리드 레이아웃을 사용해서 여러 입력을 나란히 배치합니다.

import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

필수#

required 속성을 사용해서 필수 입력을 나타냅니다.

import {
  Field,
  FieldDescription,

Badge#

라벨 안에서 Badge를 사용해서 권장 필드를 강조합니다.

import { Badge } from "@/components/ui/badge"
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

Input Group#

입력 안에 아이콘, 텍스트, 버튼을 추가하려면 InputGroup 컴포넌트를 사용합니다. 더 많은 예제는 Input Group 컴포넌트를 참고하세요.

import { InfoIcon } from "lucide-react"

import { Field, FieldLabel } from "@/components/ui/field"

Button Group#

입력에 버튼을 추가하려면 ButtonGroup 컴포넌트를 사용합니다. 더 많은 예제는 Button Group 컴포넌트를 참고하세요.

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Field, FieldLabel } from "@/components/ui/field"

폼#

여러 입력과 셀렉트, 버튼을 갖춘 완전한 폼 예제입니다.

import { Button } from "@/components/ui/button"
import {
  Field,

RTL#

Neobrutalism에서 RTL 지원을 활성화하는 방법은 RTL 설정 가이드를 참고하세요.

"use client"

import * as React from "react"

접근성#

Input은 네이티브 <input>을 렌더링하므로 키보드 편집, 포커스, 폼 제출에 ARIA 배선이 필요 없습니다. 남은 일은 직접 챙깁니다.

• 모든 input에 레이블. FieldLabel(또는 <label htmlFor>)과 짝지으세요. placeholder는 레이블이 아닙니다. 입력하면 사라지고 안정적으로 읽히지도 않습니다.
• 오류 텍스트 연결. input에 aria-invalid를 두고 aria-describedby로 FieldError나 FieldDescription의 id를 가리켜 스크린 리더가 필드와 함께 메시지를 읽게 하세요.
• 올바른 type과 autocomplete. type="email"에 autocomplete="email"을 쓰면 모바일 키보드와 자동 완성이 맞습니다.