Input

구조는 당근 SEED Text Input(Apache-2.0)을 따른다 — 상자(Container) · 입력 · 앞 · 뒤 붙이개 · 지우기 버튼. 라벨 · 설명 · 오류 · 글자 수는 Field가 둘레에서 그린다. 값은 groo 토큰이고, SEED 와 다른 자리는 맨 아래 "SEED 와 다른 점" 에 적었다(2026-10-01 사용자 결정).

수치 원본은 input.yaml이다. 수치 표 자리([표: …])와 그림 자리([그림: …])는 사이트가 그 파일로 그린다 — GitHub 에서는 그 파일 · 그림 코드로 가는 링크로 보인다.

직접 골라 보기제목 링크 복사

모양 · 크기 · 상태 · 앞 · 뒤 붙이개 · 지우기를 고르면 스펙대로 그린 칸과 그 코드가 바뀐다. 실제로 쓸 수 있다.

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

<Field label="금액">
  <Input inputMode="numeric" suffix="원" clearable />
</Field>

Anatomy제목 링크 복사

부위

Properties제목 링크 복사

Variant제목 링크 복사

상자(outline)가 기본이다. 화면에 입력이 하나뿐이면 밑줄(underline)을 쓴다 — 금액을 먼저 받는 화면, 목록 위 검색, 초대 코드, 잠금 해제 비밀번호(SEED). 밑줄은 글자가 한 단계 크고(large 18) 좌우 여백 · 모서리가 없다.

모양

Size제목 링크 복사

large(52 · 밑줄 40)는 폰 · 앱에서, medium(40 · 밑줄 34)은 1280 이상 데스크톱 웹(마우스)에서만 쓴다. 웹의 기본은 responsive 다 — 1280 미만은 large, 이상은 medium(SEED lg). 앱은 늘 large 다. 한 폼 안에서 크기를 섞지 않는다. 예외 하나 — 상단 바 안의 검색칸(거래 검색 화면의 제목 자리 · 데스크톱 머리 왼쪽)은 바 56 안이라 폰 · 앱에서도 medium 40 이다(Top Navigation 의 검색칸, 2026-10-16 구현 세션 질문 Q-017-5 정리).

large

medium

반응형

State제목 링크 복사

상태 — 상자

상태 — 밑줄

모션

캐럿은 글자색(fg-neutral)이고 고른 글은 기기 기본 하이라이트다 — 색을 따로 두지 않는다(SEED 도 정하지 않았다). 앱도 캐럿을 같은 색으로 둔다(사용자 결정 2026-10-08).

Prefix · Suffix제목 링크 복사

칸 안 앞 · 뒤에 글자나 아이콘을 둔다. 글자(prefix · suffix)는 칸 글자와 같은 크기의 fg-neutral-subtle, 아이콘(prefixIcon · suffixIcon)은 large 20 · medium 16(밑줄 24 · 20)의 fg-neutral-muted 다.

• 단위는 뒤 글자로 둔다 — 라벨에 "(원)" 을 붙이거나 칸 밖에 따로 쓰지 않는다. 단위 글자는 칸의 설명으로도 읽힌다(화면 읽기 프로그램이 "원" 을 듣는다).
• 아이콘만으로 뜻을 알리지 않는다 — 라벨이나 설명에 글로도 쓴다.

Clear Button제목 링크 복사

값이 있을 때 한 번에 지우는 버튼(clearable) — large 22 · medium 18 의 fg-neutral-subtle 원 X. 막혔거나 읽기 전용이면 보이지 않는다. 누르면 값을 비우고 입력에 포커스를 둔다. 검색칸 · 선택 사항인 칸에 둔다(필수 칸에는 두지 않는다 — 지울 일이 드물다).

누르는 영역은 44 다 — 보이는 원 둘레로 넓혀(기초 Inclusive Design 의 "누르는 영역은 모두 44 × 44 이상") 아이콘 바로 바깥을 눌러도 지운다. 상자 밖은 상자가 자르므로 medium(40)에서는 44 × 40 이다. 넓힌 자리는 입력 글의 오른쪽 끝을 덮는다 — 그 자리를 누르면 캐럿을 옮기지 않고 지운다.

Guidelines제목 링크 복사

화면에 입력이 하나뿐이면 밑줄제목 링크 복사

한 화면이 값 하나를 받으면(금액을 먼저 받는 단계 화면, 목록 위 검색) 밑줄형으로 크게 둔다. 상자형 칸 하나만 덩그러니 두지 않는다(SEED).

숫자 · 금액제목 링크 복사

• 숫자 키보드를 띄운다(inputMode="numeric" · 소수면 "decimal"). type="number" 는 쓰지 않는다 — 쉼표를 못 넣고, 휠 · 화살표로 값이 바뀐다.
• 쓰는 동안 천 단위 쉼표를 넣는다("12,000"). 단위는 뒤 글자("원").
• 작은 정수라도 흔한 값이 열 단계보다 멀면(반복 거래 "총 12회" — 흔한 24 · 36) 이 숫자 칸이다. 흔한 값이 열 단계 안쪽이면 Quantity Picker 다.

형식이 정해진 값은 한 칸에제목 링크 복사

전화번호 · 주민등록번호 · 카드 번호처럼 형식이 정해진 값은 칸을 나누지 않는다 — 한 칸에서 쓰는 대로 형식(하이픈)을 맞춰 준다(SEED). 두 칸을 나란히 두는 것은 라벨과 값이 짧을 때만이다(Field › Form 의 구성).

고르는 값은 치게 하지 않는다제목 링크 복사

날짜 · 시각 · 카테고리 · 자산처럼 정해진 값 중에서 고르는 것은 Input(타이핑)으로 받지 않는다 — 짧은 선택지는 Select 의 칸 아래 목록으로, 달력 · 시트 · 긴 목록은 입력칸 모양의 버튼 Input Button으로 연다.

코드제목 링크 복사

레시피 recipes/shadcn/components/ui/input.tsx(Input)를 Field 안에 둔다. 아래 미리보기는 스펙 값으로 그린 모습이다.

기본제목 링크 복사

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

<Field label="제목" description="결재 목록에 이 제목으로 보여요.">
  <Input placeholder="예: 개인 사유" />
</Field>

붙이개제목 링크 복사

import { Search } from "lucide-react"

<Field label="금액">
  <Input inputMode="numeric" value={formatted} onChange={onAmountChange} suffix="원" />
</Field>

<Input aria-label="메모 검색" prefixIcon={<Search />} placeholder="메모 검색" clearable />

밑줄제목 링크 복사

<Field label="얼마를 썼나요?" labelWeight="bold">
  <Input variant="underline" size="large" inputMode="numeric" suffix="원" autoFocus />
</Field>

상태제목 링크 복사

<Field label="이름" invalid errorMessage="이름을 입력해주세요.">
  <Input />
</Field>
<Field label="계좌" disabled>
  <Input defaultValue="국민 123-45-6789" />
</Field>
<Field label="아이디" readOnly>
  <Input defaultValue="groo" />
</Field>

Behavior제목 링크 복사

Accessibility제목 링크 복사

Do / Don't제목 링크 복사

✅ Do제목 링크 복사

• 모든 칸을 Field 로 감싸 라벨을 단다.
• placeholder 는 예시만("예: 개인 사유").
• 단위는 뒤 글자로, 금액은 쉼표를 넣어서.
• 화면에 입력이 하나뿐이면 밑줄형.
• 한 폼 안에서 크기를 맞춘다.

❌ Don't제목 링크 복사

• placeholder 를 라벨 대신 쓰기.
• 비활성 칸을 흐리게(불투명도) 그리기.
• 고르는 값(날짜 · 카테고리)을 타이핑으로 받기.
• 형식이 정해진 값을 여러 칸으로 나누기.
• type="number" 로 금액 받기.
• 폰에서 medium(40) 쓰기.

Specification제목 링크 복사

input.yaml 의 규칙을 하나도 빼지 않고 조건마다 그린다 — 웹 · 앱이 Input 을 만들 때 이 값을 그대로 쓴다. 조건이 없는 Base 가 모든 조합에 걸리고, 뒤의 규칙이 앞의 같은 값을 덮는다. 상태는 enabled 에서 바뀌는 값만 적었다.

SEED 와 다른 점제목 링크 복사

• 지우기 버튼을 Text Input 에도 둔다 — SEED 는 Input Button 에만 둔다. 값은 SEED Input Button 의 지우기(large 22 · medium 18)를 따랐고, Tab 순서에는 넣지 않는다. 누르는 영역은 기초의 "누르는 영역 44" 대로 원 둘레로 넓힌다.
• 아이콘은 lucide 선 아이콘(기초 Iconography v106) — 지우기는 circle-x, 오류는 circle-alert. SEED 는 채운 아이콘이다.
• 상자의 붙이개 · 여백을 눌러도 입력으로 포커스가 간다 — SEED 는 입력이 맨 앞 · 맨 뒤일 때만 그 여백까지 입력이다.
• 붙이개 글자를 입력의 설명으로 잇는다 — 단위가 화면 읽기 프로그램에도 들린다.

Migration notes제목 링크 복사

2026-10-08 — 앱 적용이 남긴 것제목 링크 복사

웹 · 앱에 옮기며 드러난 것을 사용자가 비교 페이지에서 정했다.

• 지우기 버튼의 누르는 영역 44 — 레시피는 보이는 원(22 · 18)이 곧 누르는 영역이었다(앱은 desk-app #408 에서 44 로 넓혔다). 레시피 · 예제 · 미리보기 · 사이트 그림을 맞췄다.
• 읽기 전용의 포커스는 지금처럼 표시 없음(A1 — SEED 와 같다). 다른 컨트롤과 같은 바깥 링(A2) · 편집 칸처럼 짙은 테두리(A3)는 고르지 않았다. 까닭과 2.4.7 은 Accessibility 에 적었다.
• 캐럿은 글자색(fg-neutral) · 고른 글은 기기 기본(D1) — 웹은 브라우저 기본 그대로(레시피에 캐럿 색을 적었다), 앱은 테마 primary(브랜드 파랑)였던 캐럿을 fg-neutral 로 바꾼다.

2026-10-01 — SEED Text Input 으로제목 링크 복사

사용자가 비교 페이지에서 정했다 — 투명 바탕 + 1px stroke-neutral-weak · 포커스 · 오류는 안쪽 2px(stroke-neutral-contrast · stroke-critical-solid) · 비활성 · 읽기 전용은 bg-disabled(흐림 금지) · 크기 large 52 · medium 40 · 웹 기본 반응형(앱 large) · 상자 기본 + 밑줄(화면에 입력 하나) · 라벨 · 오류 · 글자 수는 Field · 고르는 칸은 Input Button(그 차례에). 옛 스펙은 input.history/v-pre-seed-text-input.* 에 남겼다.

레시피는 <input> 하나에서 상자(div) + 입력으로 바뀌었다 — className 은 입력에, 상자에는 rootClassName. 쓰던 곳(Sidebar · Searchable List · Icon Picker)의 검색칸은 prefixIcon 으로 옮겼다. Select 의 트리거는 Select · Input Button 차례(2026-10-01)에 같은 상자로 맞췄다. Command 는 2026-10-15 걷었다. Input OTP 는 2026-10-09 이 상자 한 칸으로 다시 썼다.

제품은 앱 적용 단계에서 옮긴다(2026-10-01 조사).

• Desk 웹 — 입력 94(40 · 채운 바탕) · 검색 11(36 · 테두리 투명 · 포커스 때 흰 바탕) · 덮어써서 34 · 32 · 28. 포커스는 브랜드 테두리 + 30% 링, 비활성 흐림 50%, 읽기 전용은 편집 칸과 같다. 오류 테두리는 aria-invalid 를 단 13곳에만. 금액 칸 34곳 중 쉼표를 넣는 곳 5, 단위 없는 원화 칸 17 · 라벨에 "(원)" 6, "%" 를 붙인 칸 1(값은 가중치라 뜻이 틀림). 지우기 버튼 2곳(18 · 28 — 손으로). 매월 일자 칸은 지우면 1로 돌아와 비울 수 없다.
• Desk 앱 — PTextInput 87곳(40 고정 · 모서리 4 · 채운 바탕 · 포커스 1px), 검색 PSearchField 13(36 · 모서리 8 · 테두리 없음). 금액 칸 4곳은 18 · 20 굵은 글자를 40 상자에 넣어 넘친다(줄 높이 41 · 44). 지우기 버튼은 일반 칸 0 / 84 · 검색 2 / 13. 금액 칸 26곳 중 쉼표 1곳. 비활성 칸이 편집 칸과 구분되지 않는 곳 18. 칸 경계 대비 바탕 1.12 · 테두리 1.23.
• HR 웹 — Input 54(36 · 모서리 6 · 테두리 #eee — 흰 바탕 1.16:1 · 투명), 글자 768 미만 16 · 이상 14. 포커스는 파랑 테두리 + 3px 반투명 링(다크는 회색). 비활성 흐림 50%. 읽기 전용을 흉내 낸 div 상자 4. 숫자는 type="number" 14곳 · 소수가 잘리는 칸이 있다. 단위는 칸 밖 글자로.