DateInput

달력 없이 날짜를 직접 입력. 순서는 사용자 언어를 따른다.

라이브러리 전용

개요

미리보기

예시 언어동작 줄이기

생년월일

Format MM/DD/YYYY · e.g. 10/26/2026

label

hint

error

requireddisabledreadOnly

defaultValue

value

min

max

name

예시

상태

비어 있음
생년월일
Format MM/DD/YYYY · e.g. 10/26/2026
해석 미리보기
생년월일
Format MM/DD/YYYY · e.g. 10/26/2026
Monday, October 19, 2026
도움말
생년월일
Format MM/DD/YYYY · e.g. 10/26/2026
여권에 적힌 날짜예요.
형식 오류
생년월일
Format MM/DD/YYYY · e.g. 10/26/2026
2026. 10. 19. 형식으로 입력해 주세요.
범위 제한
생년월일
Format MM/DD/YYYY · e.g. 10/21/2026
필수
생년월일
Format MM/DD/YYYY · e.g. 10/26/2026
비활성
생년월일
Format MM/DD/YYYY · e.g. 10/26/2026
Monday, October 19, 2026

쓰임 예

폼 제출 이름
생년월일
Format MM/DD/YYYY · e.g. 10/26/2026

이렇게 · 이렇게 하지 않기

이렇게 생년월일처럼 달력이 오히려 느린 날짜에 쓴다.
이렇게 순서는 사용자 언어의 날짜 순서를 따르고, 형식 줄을 항상 보인다.
이렇게 하지 않기 연·월·일을 칸 세 개로 나누지 않는다. 칸을 넘나드는 커서와 붙여넣기가 깨진다.
이렇게 첫 검증은 blur나 제출 때. 오류가 보인 뒤에는 입력마다 다시 검증해 고쳐지면 바로 지운다.
이렇게 하지 않기 “형식이 맞음”을 초록 체크로 표시하지 않는다. 형식 검사는 사실 확인이 아니다.

토큰과 속성

이름	타입	기본값	설명
`label`	`ReactNode`	`생년월일`	항상 보이는 라벨(<label for> 또는 <legend>). placeholder로 대신하지 않는다.
`hint?`	`ReactNode`		상시 도움말. FieldMessage로 그리고 aria-describedby의 첫 번째로 연결한다. 비우면 없음.
`error?`	`ReactNode`		오류 문장. 있으면 aria-invalid="true". 오류 노드는 항상 마운트되어 있고 내용만 바뀐다.
`required?`	`boolean`	`false`	required 속성과 함께 라벨 옆에 “필수” 텍스트를 보인다(별표만 쓰지 않음).
`disabled?`	`boolean`	`false`	Tab에서 빠지고 제출되지 않는다. 값을 보여 줘야 하면 readOnly를 쓴다.
`readOnly?`	`boolean`	`false`	초점을 받고 복사할 수 있지만 바꿀 수 없다.
`defaultValue?`	`string`		비제어 초기 날짜(YYYY-MM-DD). 화면에는 로캘 순서로 보인다.
`value?`	`string`		제어 값(YYYY-MM-DD). null이면 비어 있음. onValueChange와 함께 쓴다.
`min?`	`string`		고를 수 있는 가장 이른 날짜(YYYY-MM-DD). 그 전 날짜는 초점은 받지만 aria-disabled.
`max?`	`string`		고를 수 있는 가장 늦은 날짜(YYYY-MM-DD).
`name?`	`string`		폼 이름. 제출 값은 입력 순서와 상관없이 항상 YYYY-MM-DD(숨은 입력).
`onValueChange(value: string \| null)`	—	—	유효한 범위 안 날짜가 되면 YYYY-MM-DD, 지우거나 틀리면 null.
`parse`	—	—	숫자가 아닌 문자는 모두 구분자로 읽는다(2026-10-19, 2026.10.19). 첫 덩어리가 4자리면 연-월-일. 구분자 없는 8자리는 로캘 순서(ko 20261019, en 10192026). 두 자리 연도는 추측하지 않고 오류.
`ref`	—	—	ref는 보이는 <input>으로 전달된다.
그 밖의 속성	—	—	autoFocus, onBlur, aria-* 등은 보이는 <input>으로 간다. type·inputMode·onChange는 컴포넌트가 정한다.

예시

상태

비어 있음
생년월일
Format MM/DD/YYYY · e.g. 10/26/2026
해석 미리보기
생년월일
Format MM/DD/YYYY · e.g. 10/26/2026
Monday, October 19, 2026
도움말
생년월일
Format MM/DD/YYYY · e.g. 10/26/2026
여권에 적힌 날짜예요.
형식 오류
생년월일
Format MM/DD/YYYY · e.g. 10/26/2026
2026. 10. 19. 형식으로 입력해 주세요.
범위 제한
생년월일
Format MM/DD/YYYY · e.g. 10/21/2026
필수
생년월일
Format MM/DD/YYYY · e.g. 10/26/2026
비활성
생년월일
Format MM/DD/YYYY · e.g. 10/26/2026
Monday, October 19, 2026

쓰임 예

폼 제출 이름
생년월일
Format MM/DD/YYYY · e.g. 10/26/2026

이렇게 · 이렇게 하지 않기

이렇게 생년월일처럼 달력이 오히려 느린 날짜에 쓴다.

이렇게 순서는 사용자 언어의 날짜 순서를 따르고, 형식 줄을 항상 보인다.

이렇게 하지 않기 연·월·일을 칸 세 개로 나누지 않는다. 칸을 넘나드는 커서와 붙여넣기가 깨진다.

이렇게 첫 검증은 blur나 제출 때. 오류가 보인 뒤에는 입력마다 다시 검증해 고쳐지면 바로 지운다.

이렇게 하지 않기 “형식이 맞음”을 초록 체크로 표시하지 않는다. 형식 검사는 사실 확인이 아니다.

토큰과 속성

이름	타입	기본값	설명
`label`	`ReactNode`	`생년월일`	항상 보이는 라벨(<label for> 또는 <legend>). placeholder로 대신하지 않는다.
`hint?`	`ReactNode`		상시 도움말. FieldMessage로 그리고 aria-describedby의 첫 번째로 연결한다. 비우면 없음.
`error?`	`ReactNode`		오류 문장. 있으면 aria-invalid="true". 오류 노드는 항상 마운트되어 있고 내용만 바뀐다.
`required?`	`boolean`	`false`	required 속성과 함께 라벨 옆에 “필수” 텍스트를 보인다(별표만 쓰지 않음).
`disabled?`	`boolean`	`false`	Tab에서 빠지고 제출되지 않는다. 값을 보여 줘야 하면 readOnly를 쓴다.
`readOnly?`	`boolean`	`false`	초점을 받고 복사할 수 있지만 바꿀 수 없다.
`defaultValue?`	`string`		비제어 초기 날짜(YYYY-MM-DD). 화면에는 로캘 순서로 보인다.
`value?`	`string`		제어 값(YYYY-MM-DD). null이면 비어 있음. onValueChange와 함께 쓴다.
`min?`	`string`		고를 수 있는 가장 이른 날짜(YYYY-MM-DD). 그 전 날짜는 초점은 받지만 aria-disabled.
`max?`	`string`		고를 수 있는 가장 늦은 날짜(YYYY-MM-DD).
`name?`	`string`		폼 이름. 제출 값은 입력 순서와 상관없이 항상 YYYY-MM-DD(숨은 입력).
`onValueChange(value: string \| null)`	—	—	유효한 범위 안 날짜가 되면 YYYY-MM-DD, 지우거나 틀리면 null.
`parse`	—	—	숫자가 아닌 문자는 모두 구분자로 읽는다(2026-10-19, 2026.10.19). 첫 덩어리가 4자리면 연-월-일. 구분자 없는 8자리는 로캘 순서(ko 20261019, en 10192026). 두 자리 연도는 추측하지 않고 오류.
`ref`	—	—	ref는 보이는 <input>으로 전달된다.
그 밖의 속성	—	—	autoFocus, onBlur, aria-* 등은 보이는 <input>으로 간다. type·inputMode·onChange는 컴포넌트가 정한다.

개요

예시

상태

쓰임 예

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기

개요

예시

상태

쓰임 예

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기