Input

9-slot 구조의 TextField. TextFieldButton / TextFieldContent 서브컴포넌트는 아직 미포함.

사용

import { Input } from "@fluxloop-ai/pds-ui/components/input";

<Input placeholder="프로젝트 이름" />
<Input invalid defaultValue="잘못된 값" />
<Input leadingContent={<Icon icon={Search} />} />

Basic

Size

State

invalid / positive / readOnly / disabled. 포커스 시 reset 버튼이 표시된다.

Slots

leadingContent · trailingContent 로 아이콘/배지 삽입.

@pluto.com

Props

Prop	타입	기본	설명
`size`	`sm \| md \| lg`	`md`	높이 + 폰트 크기
`invalid`	`boolean`	`false`	빨간 링 + invalid 아이콘
`positive`	`boolean`	`false`	파란 체크 아이콘
`disabled`	`boolean`	`false`	—
`readOnly`	`boolean`	`false`	reset 버튼 숨김
`leadingContent`	`ReactNode`	—	좌측 slot
`trailingContent`	`ReactNode`	—	우측 slot (reset 앞)
`trailingButton`	`ReactNode`	—	오른쪽 붙는 버튼 슬롯
`width`	`CSSProperties["width"]`	—	wrapper 너비
`onReset`	`(prev: string) => void`	—	reset 콜백

9 Slot 구조

wrapper → field → [leading, input, invalidIcon | positiveIcon, reset, trailing] + trailingButton

Slot	역할
`wrapper`	외곽 컨테이너, 배경/그림자/블러
`field`	내부 border + focus ring 담당
`leading`	왼쪽 아이콘/배지
`input`	실제 `<input>`
`trailing`	오른쪽 커스텀 slot
`trailingButton`	오른쪽 붙는 버튼 (미래 `InputButton`)
`reset`	포커스 시 나타나는 ⓧ 초기화
`invalidIcon`	invalid ⚠ 아이콘
`positiveIcon`	positive ✓ 아이콘

Registry 설치

npx shadcn add https://pds.pluto.com/r/input