Input

Input은 문자, 숫자, 기호 등을 입력하고 편집할 수 있는 입력 컴포넌트입니다. 쓰임새에 따라 Text field와 Text area 두 가지로 분류됩니다. 화면 내 특정 섹션에서 사용자에게 비교적 간단한 입력을 요청하는 컨텍스트에 사용됩니다.

Anatomy

  • Text field

    anatomy

    • Input container
    • Placeholder
    • Icon
    • Supporting text

  • Text area

    anatomy

    • Input container
    • Placeholder
    • Text limit
    • Button
    • Supporting text

Spec

anatomy

    State

  • Default : 사용자가 정보를 입력하기 전 상태입니다.
  • Focused : 사용자가 필드를 눌러 정보를 입력 중일 때의 상태입니다.
  • Filled : 사용자가 정보를 입력 완료한 상태입니다.
  • Disabled : 정보 입력 할 수 없는 비활성화 상태입니다.
  • Error : 입력 정보가 유효하지 않을 경우입니다.
  • Success : 입력 정보가 요청한 형식에 맞을 경우입니다.
  • Autocomplete : 입력 시간을 절약하고 형식이나 철자 오류를 줄이기 위해, 사용자가 정보를 입력하는 도중 자동으로 답변을 제안합니다.
  • Spacing

    Spacing

    좌측 정렬을 기본으로 합니다. 2개 이상의 아이콘 사용해야 할 경우 가로 간격은 패딩 8로 사용합니다.

  • Size

    Size

    가로의 최대값은 디바이스 너비에서 좌우 마진을 제외한 값이며, 최대값 내에서 가변적으로 사용이 가능합니다. 높이는 고정이며, MO와 PC를 구분하여 사용하도록 합니다. L (H50, MO only) M (H44, PC only) S (H38)

© KYOBO BOOK CENTRE교보문고 바로가기