Input

제멋대로 입력되는 텍스트 입력 필드를 표시합니다.

import { Input } from "@chadcn/ui"
import { Field, FieldLabel, FieldDescription } from "@chadcn/ui"

export function InputDemo() {
  return (
    <div className="w-full max-w-sm">
      <Field>
        <FieldLabel>API 키</FieldLabel>
        <Input type="password" placeholder="API 키를 입력하세요..." />
        <FieldDescription>
          API 키는 암호화되어 안전하게 저장됩니다.
        </FieldDescription>
      </Field>
    </div>
  )
}

동작 방식

type="password" 필드가 사용자 편의를 위해 평문으로 표시됩니다.
입력할 때 5% 확률로 방금 입력한 문자가 이전 문자와 위치가 뒤바뀝니다. 은근하게 오타가 생깁니다.

설치

준비 중패키지가 아직 npm에 게시되지 않았습니다.

pnpm add @chadcn/ui

사용법

import "@chadcn/ui/styles.css"
import { Input } from "@chadcn/ui"

<Input />

준비 중패키지가 아직 npm에 게시되지 않았습니다.

예제

기본

import { Input } from "@chadcn/ui"

export function InputBasic() {
  return (
    <div className="w-full max-w-sm">
      <Input type="email" placeholder="이메일" />
    </div>
  )
}

필드

Field, FieldLabel, FieldDescription을 사용하여 레이블과 설명이 있는 입력 필드를 만들 수 있습니다.

import { Input } from "@chadcn/ui"
import { Field, FieldLabel, FieldDescription } from "@chadcn/ui"

export function InputField() {
  return (
    <div className="w-full max-w-sm">
      <Field>
        <FieldLabel>사용자 이름</FieldLabel>
        <Input placeholder="chadcn" />
        <FieldDescription>
          계정에 사용할 고유한 사용자 이름을 선택하세요.
        </FieldDescription>
      </Field>
    </div>
  )
}

필드 그룹

FieldGroup을 사용하여 여러 Field를 묶고 폼을 구성합니다.

import { Input } from "@chadcn/ui"
import { Button } from "@chadcn/ui"
import { Field, FieldLabel, FieldDescription, FieldGroup } from "@chadcn/ui"

export function InputFieldGroup() {
  return (
    <form className="space-y-4">
      <FieldGroup>
        <Field>
          <FieldLabel>이름</FieldLabel>
          <Input placeholder="이름" />
        </Field>
        <Field>
          <FieldLabel>이메일</FieldLabel>
          <Input type="email" placeholder="이메일" />
          <FieldDescription>
            이 주소로 업데이트를 보내드립니다.
          </FieldDescription>
        </Field>
      </FieldGroup>
      <div className="flex gap-2">
        <Button variant="outline" type="reset">초기화</Button>
        <Button type="submit">제출</Button>
      </div>
    </form>
  )
}

비활성화

disabled prop으로 입력 필드를 비활성화합니다.

import { Input } from "@chadcn/ui"
import { Field, FieldLabel, FieldDescription } from "@chadcn/ui"

export function InputDisabled() {
  return (
    <Field data-disabled>
      <FieldLabel>이메일</FieldLabel>
      <Input disabled type="email" placeholder="이메일" />
      <FieldDescription>
        이 필드는 현재 비활성화되어 있습니다.
      </FieldDescription>
    </Field>
  )
}

유효하지 않음

aria-invalid prop으로 유효하지 않은 상태를 표시합니다.

import { Input } from "@chadcn/ui"
import { Field, FieldLabel, FieldDescription } from "@chadcn/ui"

export function InputInvalid() {
  return (
    <Field data-invalid>
      <FieldLabel>유효하지 않은 입력</FieldLabel>
      <Input aria-invalid type="email" placeholder="이메일" />
      <FieldDescription>
        이 필드에 유효성 검사 오류가 있습니다.
      </FieldDescription>
    </Field>
  )
}

파일

type="file"로 파일 입력을 만듭니다.

import { Input } from "@chadcn/ui"
import { Field, FieldLabel, FieldDescription } from "@chadcn/ui"

export function InputFile() {
  return (
    <Field>
      <FieldLabel>사진</FieldLabel>
      <Input type="file" />
      <FieldDescription>업로드할 사진을 선택하세요.</FieldDescription>
    </Field>
  )
}

인라인

Button과 함께 사용하여 검색 입력을 만듭니다.

import { Input } from "@chadcn/ui"
import { Button } from "@chadcn/ui"

export function InputInline() {
  return (
    <div className="flex gap-2">
      <Input placeholder="검색..." />
      <Button type="submit">검색</Button>
    </div>
  )
}

그리드

그리드 레이아웃으로 여러 입력 필드를 나란히 배치합니다.

import { Input } from "@chadcn/ui"
import { Field, FieldLabel } from "@chadcn/ui"

export function InputGrid() {
  return (
    <div className="grid grid-cols-2 gap-4">
      <Field>
        <FieldLabel>성</FieldLabel>
        <Input placeholder="성" />
      </Field>
      <Field>
        <FieldLabel>이름</FieldLabel>
        <Input placeholder="이름" />
      </Field>
    </div>
  )
}

필수

required 속성으로 필수 입력 필드를 나타냅니다.

import { Input } from "@chadcn/ui"
import { Field, FieldLabel, FieldDescription } from "@chadcn/ui"

export function InputRequired() {
  return (
    <Field>
      <FieldLabel>
        필수 필드 <span className="text-destructive">*</span>
      </FieldLabel>
      <Input required placeholder="이 필드는 필수입니다" />
      <FieldDescription>이 필드는 반드시 채워야 합니다.</FieldDescription>
    </Field>
  )
}

뱃지

레이블에 Badge를 사용하여 추천 필드를 강조합니다.

import { Input } from "@chadcn/ui"
import { Badge } from "@chadcn/ui"
import { Field, FieldLabel } from "@chadcn/ui"

export function InputBadge() {
  return (
    <Field>
      <FieldLabel className="flex items-center gap-2">
        웹훅 URL <Badge variant="secondary">베타</Badge>
      </FieldLabel>
      <Input placeholder="https://example.com/webhook" />
    </Field>
  )
}

입력 그룹

입력 필드에 아이콘이나 텍스트를 추가하려면 InputGroup 컴포넌트를 사용합니다.

import { Input } from "@chadcn/ui"
import { Field, FieldLabel } from "@chadcn/ui"
import { InputGroup, InputGroupText } from "@chadcn/ui"

export function InputGroupDemo() {
  return (
    <Field>
      <FieldLabel>웹사이트 URL</FieldLabel>
      <InputGroup>
        <InputGroupText>https://</InputGroupText>
        <Input placeholder="example.com" />
      </InputGroup>
    </Field>
  )
}