Input

한 줄짜리 값을 입력받아요. 이름, 이메일, 홈페이지 주소처럼 짧은 값에 써요. 여러 줄을 입력할 때는 Textarea를, 올리고 내려서 맞추는 숫자는 NumberField를 써요.

사용 예시

라벨과 도움말

Field로 감싸면 라벨을 눌렀을 때 Input에 포커스가 가요. Input의 너비는 부모 요소와 같아요.

내보낼 파일 이름

확장자는 저장할 때 붙어요.

tsx

<Field>  <FieldLabel>내보낼 파일 이름</FieldLabel>  <Input value={fileName} onChange={e => setFileName(e.target.value)} placeholder="무제" />  <FieldHelp>확장자는 저장할 때 붙어요.</FieldHelp></Field>

이메일

권장

라벨은 값을 입력한 뒤에도 남아요. placeholder에는 값의 예시를 적어요.

지양

placeholder는 값을 입력하면 사라져요. 그 뒤에는 Input의 용도를 알 수 없어요.

배경

폼에 Input이 여러 개 있을 때는 bare를 써요. 하나만 있거나 Input이 눈에 띄어야 하면 well을 써요.

tsx

<Input value={name} onChange={e => setName(e.target.value)} placeholder="김지우" /><Input value={team} onChange={e => setTeam(e.target.value)} surface="well" placeholder="디자인" />

제목 바로 고치기

헤더의 제목처럼 보던 곳에서 값을 바로 고칠 때 써요.

10월 6일

tsx

<div className="border-line flex items-center gap-2 border-b pb-2">  <Input surface="ghost" value={title} onChange={e => setTitle(e.target.value)} aria-label="문서 제목" />  <span className="text-caption text-fg-muted shrink-0">10월 6일</span></div>

폼에서는 bare

표시 이름

권장

폼에서는 테두리가 있는 bare를 써요. 어디에 입력하는지 바로 보여요.

표시 이름

지양

폼에서 ghost를 쓰면 Input이 글자처럼 보여서 어디를 눌러야 할지 알 수 없어요.

값의 종류

URL, 검색어처럼 값의 종류가 정해져 있으면 type을 적어요.

홈페이지 주소

주문 찾기

tsx

<Field>  <FieldLabel>홈페이지 주소</FieldLabel>  <Input type="url" placeholder="https://example.com" /></Field><Field>  <FieldLabel>주문 찾기</FieldLabel>  <Input type="search" placeholder="주문 번호" /></Field>

버튼 옆

옆에 있는 컨트롤과 size를 맞춰요. Input이 lg면 버튼도 lg예요.

홈페이지 주소

tsx

<Field>  <FieldLabel>홈페이지 주소</FieldLabel>  <div className="flex gap-2">    <Input type="url" placeholder="https://example.com" />    <Button color="brand" emphasis="solid">저장</Button>  </div></Field>

권장

높이가 같아서 위아래 끝이 맞아요.

지양

Input에만 size를 주면 위아래 끝이 어긋나요.

틀린 값

입력한 값이 조건에 맞지 않을 때 Field에 invalid를 주고, FieldError에 필요한 값을 적어요.

이메일

@ 뒤에 example.com 같은 도메인이 있어야 해요.

tsx

<Field invalid>  <FieldLabel>이메일</FieldLabel>  <Input value={email} onChange={e => setEmail(e.target.value)} placeholder="name@example.com" />  <FieldError>@ 뒤에 example.com 같은 도메인이 있어야 해요.</FieldError></Field>

이메일

@ 뒤에 example.com 같은 도메인이 있어야 해요.

권장

오류 문구를 읽고 바로 고칠 수 있어요.

이메일

지양

빨간 테두리만으로는 고칠 곳을 알 수 없어요. 색을 구분하기 어려운 사람은 오류를 알아보기 어려워요.

비활성

값을 입력할 수 없을 때 disabled를 줘요. 입력할 수 있게 되는 조건을 도움말에 함께 적어요.

내보낼 파일 이름

내보낼 항목을 고르면 이름을 정할 수 있어요.

tsx

<Field>  <FieldLabel>내보낼 파일 이름</FieldLabel>  <Input disabled placeholder="무제" />  <FieldHelp>내보낼 항목을 고르면 이름을 정할 수 있어요.</FieldHelp></Field>

컨트롤

surface

size

disabled

invalid

값""

tsx

<Input value={email} onChange={e => setEmail(e.target.value)} placeholder="name@example.com" />

명세

이름
이름	값	기본
속성
surface	bare, well, ghost	bare
bare는 투명 배경에 테두리, well은 회색 배경이에요. ghost는 평소에 글자만 보이고, 마우스를 올리면 옅은 배경, 입력하거나 열면 조금 진한 배경이 생겨요. 여러 개가 나란히 있으면 bare, 하나만 있으면 well, 헤더나 표 셀에서 값을 바로 고치면 ghost를 써요.
size	sm, md, lg	md
높이가 32, 36, 40px이에요.
value	string	-
호출하는 쪽에서 입력한 값을 관리해요.
defaultValue	string	-
처음 값이에요.
onValueChange	(value: string, eventDetails) => void	-
입력한 값이 바뀌면 호출돼요.
onChange	(event: ChangeEvent<HTMLInputElement>) => void	-
입력한 값이 바뀌면 호출돼요.
className	string	-
그대로 넘어가는 속성
type	string	text
입력받을 값의 종류예요. 폰에서 키보드가 그 값에 맞게 바뀌어요.
placeholder	string	-
disabled	boolean	false
readOnly	boolean	false
글자색이 옅어지고 배경이 well 색이 돼요. 값은 복사할 수 있어요.
aria-invalid	true	-
danger 색 테두리가 보여요. Field에 invalid를 주면 자동으로 붙어요.