Input

import {
  Field,
  FieldDescription,

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/input.json

사용법

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

<Input />

KRDS 정렬

• 분류: 기존 shadcn input primitive를 유지하는 KRDS-styled 컴포넌트입니다. 모든 native <input> prop을 그대로 전달하며 TextInput alias도 함께 제공합니다.
• KRDS 적용: 높이, border, focus ring, disabled, invalid 상태가 KRDS form token에 맞춰 조정되어 있습니다.
• 사용 권장: label, description, required, invalid 상태는 Field 계열 컴포넌트와 함께 조합해 KRDS 입력 폼 의미를 유지하세요.

예제

Basic

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

export function InputBasic() {

Field

Use Field, FieldLabel, and FieldDescription to create an input with a label and description.

import {
  Field,
  FieldDescription,

Field Group

Use FieldGroup to show multiple Field blocks and to build forms.

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

Disabled

disabled prop으로 input을 비활성화합니다. 비활성 상태 스타일은 Field 컴포넌트에 data-disabled 속성을 추가해 적용합니다.

import {
  Field,
  FieldDescription,

Invalid

aria-invalid prop으로 input을 invalid 상태로 표시합니다. invalid 상태 스타일은 Field 컴포넌트에 data-invalid 속성을 추가해 적용합니다.

import {
  Field,
  FieldDescription,

File

type="file" prop으로 파일 input을 만듭니다.

import {
  Field,
  FieldDescription,

Inline

Use Field with orientation="horizontal" to create an inline input. Pair with Button to create a search input with a button.

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

Grid

Use a grid layout to place multiple inputs side by side.

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

Required

required 속성으로 필수 입력을 표시합니다.

import {
  Field,
  FieldDescription,

Badge

Use Badge in the label to highlight a recommended field.

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

Input Group

To add icons, text, or buttons inside an input, use the InputGroup component. Input Group component for more examples.

import { InfoIcon } from "lucide-react"

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

Button Group

To add buttons to an input, use the ButtonGroup component. Button Group component for more examples.

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

Form

A full form example with multiple inputs, a select, and a button.

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

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

"use client"

import * as React from "react"