본문 바로가기 메인메뉴 바로가기
이 누리집은 대한민국 공식 전자정부 누리집입니다.

날짜 입력 필드

날짜 입력 필드는 사용자가 특정 날짜 또는 기간을 입력하거나 선택하는 데 사용되는 요소이다.

컴포넌트명

날짜 입력 필드 (Date input)

날짜 입력 필드(Date input) 스타일 예시

  1. 1.레이블

    사용자가 어떤 텍스트를 입력해야 하는지를 안내하는 문구

  2. 2.입력 필드

    날짜 텍스트가 입력되는 영역으로 배경과 입력 필드를 구분하여 사용자가 날짜 입력 필드임을 인지할 수 있게 함

  3. 3.플레이스홀더(선택)

    날짜를 어떤 양식으로 입력해야 하는지에 대한 힌트 또는 예시를 제공함

  4. 4.달력 아이콘 버튼

    날짜 선택을 위한 달력 컴포넌트 레이어 표시/숨기기에 사용되는 아이콘 버튼

  5. 5.도움말(선택)

    입력 방식에 대한 도움말 또는 오류 메시지를 제공함

유형

Date_input

Size콘텐츠 내에서 적합한 계층을 가진 크기로 사용한다.

Large

입력시 필요한 정보를 입력해 주세요

Small

입력시 필요한 정보를 입력해 주세요

코드 보기

State사용자의 상호작용 시 컬러가 변경된다.

Default

입력시 필요한 정보를 입력해 주세요

Focused

입력시 필요한 정보를 입력해 주세요

Completed

입력시 필요한 정보를 입력해 주세요

Error

입력시 필요한 정보를 입력해 주세요

Disabled

입력시 필요한 정보를 입력해 주세요

View

입력시 필요한 정보를 입력해 주세요

Text보조 설명글 또는 얼럿을 필요시에 제공한다.

Hint

입력시 필요한 정보를 입력해 주세요

Alert

유형

Date_input_unit

Size콘텐츠 내에서 적합한 계층을 가진 크기로 사용한다.

Large

  • 년
  • 월
  • 일

Small

  • 년
  • 월
  • 일
코드 보기

가이드

  • 입력 필드에 레이블을 제공하고 어떤 날짜를 입력해야 하는지 명확하게 설명한다. 모든 날짜 입력 필드에는 입력 내용을 적절하게 설명하는 레이블을 제공해야 한다. 다중 입력 필드에는 ‘년’, ‘월’, ‘일’이라는 레이블을 제공하고 입력 필드 상단에 입력이 필요한 날짜에 대한 설명을 제공하면 된다.
  • 도움말 텍스트를 활용하여 날짜 입력 형식을 안내한다. 입력 필드 하단의 도움말 텍스트를 사용하여 입력해야 할 날짜의 양식을 정확하게 안내해야 한다. 플레이스홀더는 사용자가 입력을 시작하면 사라지기 때문에 입력 필드 하단의 도움말 텍스트를 사용하는 것이 바람직하다. 플레이스홀더에는 'YYYY/MM/DD'와 같은 형식에 대한 자리 표시자를 제공하고 도움말 텍스트에는 입력 자릿수에 대한 안내 문구와 작성 예시를 제공한다.