Input

Input은 Text를 입력하고 편집 할 수 있는 Component로 Text를 입력하는 Text Input, Text Input with Icon 그리고 Text 입력을 통해서 특정 값을 Search하는 역할을 하는 Search Input이 있습니다.

Anatomy

Dropdown Type

Dropdown은 구성요소인 Menu Item을 사용하여 페이지의 콘텐츠를 필터링하거나 정렬을 하기 위해서 사용됩니다. 해당 컴포넌트는 Dropdown Button의 유형에 따라 Primary Type (Label Dropdown), Secondary Type (Avatar and Badge Dropdown) 그리고 Tertiary Type (Non-Outlined Dropdown)으로 3가지로 분류합니다.

Components

Input은 스타일, 쓰임새 그리고 채워지는 Filed의 형태에 따라서 Primary Type, Secondary Type 2가지로 분류되는데, 그 안에서도 사용되는 방식에 따라서 Text (with Icon) Input, Search Input 세부항목으로 분리되어 사용됩니다.

Text (with Icon) Input

Primary Type은 가장 흔하게 사용되는 타입으로, Field의 값이 Text로만 구성되어진 Label Dropdown과 Icon과 Text가 함께 Field값으로 사용되는 Label with Icon Dropdown으로 구성되어집니다.

Secondary Type

Secondary Type은 Input의 Outline이 표출이 되지 않는 상태로 Focused 상태가 되었을때 Primary Type의 Text (with Icon) Input 형태가 사용되는 타입입니다. Table Input과 List Input으로 2가지로 분류하여 사용됩니다. Table Dropdown의 경우 해당 영역의 일정 부분 Padding이 제공된 상태에서 Input 영역을 제공하는 것이 특징이며, List Input의 경우 List 한 Cell의 영역을 모두 차지하여 (Padding=0) 사용하는 것이 특징입니다.

Extra Type

Extra Type은 Primary와 Secondary 내에 포함되지 않는 타입으로, 최대 Height를 기준으로 작성되는 Input에 따라 Height가 유동적인 Description Text Area와 Height를 고정한 상태로 사용되는 Comment Text Input, 그리고 Numerical Data 입력시에만 사용되는 Numerical Text Input이 있습니다.

Varients

State

Input의 State는 4가지 (Disabled, Default, Hover, Focused)로 구성 되어져 있습니다.

Size

사이즈는 Height를 기준으로 Large, Medium, Small을 사용합니다. Width의 경우는 유동적입니다.

Sizing

Minimum Width

Width의 경우 일반적으로 들어가는 영역에 따라서 Flexible하게 구성이 되어 지며 Minimum Width는 160px를 최소값으로 가집니다.

Text Overflow

Input에서 text의 값이 넘치는 경우 두가지 방식으로 표현 됩니다. height를 고정한 상태로 text를 '...'을 사용하여 축약하는 방식, Input의 주어진 Width보다 넘치는 text 값을 줄바뀜하여 표기해주는 방식으로 기능의 특징이나 목적에 따라서 선택적으로 사용되게 됩니다.

Table of Figma Properties - Input

Search

Search Input을 Text의 입력을 통해서 원하는 정보를 찾을 수 있습니다. Search의 경우 다른 Input Component와 다르게 'Fill=On' 일 경우 Cancle (Clear All) Icon Btn을 표출하는 것이 특징입니다.

Text Input with Field Label

특정 페이지에서 항목 검색을 위해 사용되는 경우로 Container Outline을 가지는 형태

Text Input without Field Label

다른 컴포넌트 안에서의 아이템을 검색을 위해 사용 되는 경우로, Underline을 가지는 형태

Text (with Icon) Input

사용자가 Text를 필드에 입력이 가능하도록 표시 됩니다. 일반적으로 Field Lable과 함께 사용이 됩니다.
(e.g. OSD Viewer Panel의 Status, Comment 등의 Text 입력, History Panel의 Text 입력, Login 부분의 입력)

Table / List Input

Table 혹은 List 내에서 즉각적으로 수정이 가능하도록 합니다. Table 및 List에서 사용되는 Input의 경우 Hover, Focused 상태에서 기존 Primary Type의 Input과 동일한 상태로 표출 되는 것이 특징입니다.

Text Input in Table

Table 내에서의 콘텐츠를 수정하기 위한 목적으로 사용되어 집니다.

Text Input in List

List 내에서의 콘텐츠를 수정하기 위한 목적으로 사용되어 집니다.

Numerical Input

Value 형태의 값만 입력이 가능한 Input으로 별도의 Label과 함께 사용되지 않아 우측에 일정 간격을 둔채로 Unit과 함께 표출됩니다.

Numerical Input with unit

단위와 함께 사용되는 형태로 별도의 다른 요소 (checkbox, slider, etc..)등과 함께 사용

State of Numerical Input

Disabled, Default, Hover, 그리고 Focused로 4가지 상태를 가지며 각 상태별 Filled 그리고 Unfilled로 데이터가 차있는 경우와 아닌 2가지로 존재하며 Unfilled일 경우에 표출 되는 Placeholder의 경우에 따라 '0', 'min' 그리고 'max' 로 3가지 값을 가집니다.

Description / Comment

Description 및 Comment 패턴은 텍스트 정보를 표시하거나 사용자의 의견을 입력받는 상황에서 사용됩니다. 표현 목적에 따라 읽기 중심의 Text Area와 입력 중심의 Text Input으로 구분되며, 사용 맥락에 따라 컨테이너 높이가 유동적으로 확장되거나 고정된 높이 내에서 동작하도록 설계됩니다.

이를 통해 동일한 텍스트 기반 컴포넌트라도 화면의 목적과 사용 흐름에 맞는 일관된 입력 경험을 제공할 수 있습니다.

Description Text Area

설명성 텍스트를 읽기 쉬운 형태로 전달하기 위해 사용됩니다. 주로 안내 문구, 상태 설명, 부가 정보와 같이 읽기 중심의 콘텐츠에 활용되며, 내용 길이에 따라 1줄 또는 2줄 이상의 형태로 확장하여 사용할 수 있습니다.

Description Text Input

사용자가 설명이나 상세 내용을 직접 입력하는 경우에 사용됩니다. 특히 History Panel과 같이 높이가 고정된 영역에서는 전체 패널 구조를 유지한 상태에서 입력이 이루어지도록 설계되는 것이 특징입니다.

Comment Text Area

자유로운 길이의 의견이나 코멘트를 입력받기 위해 사용됩니다. 입력되는 텍스트 양에 따라 컨테이너 높이가 함께 확장되며, 여러 줄의 내용을 자연스럽게 수용할 수 있습니다.

Commnet Text Input

짧은 코멘트나 빠른 응답 입력에 사용됩니다. 입력 필드의 높이는 고정되며, 제한된 영역 안에서 간결하고 효율적인 입력 경험을 제공하는 것이 특징입니다.

Usage & Placement

Input의 경우 Form의 입력 형식에서 많이 사용이 되며, Dropdown과 함께 주로 사용되어 집니다.

Label

Dropdown이 포함된 입력 Form의 형태에서 Dropdown 항목에 대한 Label이 함께 사용됩니다. Subtitle 3 (Inter, Medium, 14px) 가 함께 사용 되며 해당 Required, Error, 그리고 부가적인 정보가 필요한 Information의 형태로 사용 가능 합니다. Label을 포함한 Dropdown 및 Input의 조합은 여러개가 함께 사용되는 경우가 많습니다. Label과 Dropdown 사이의 간격은 8px, 각 요소 사이의 간격을 가로 배열시 24px, 세로 배열시 32px로 두고 배열하여 사용됩니다. 세로 형태로만 배열되는 형식일 경우 각 요소 사이의 간격을 16px로 배열하는 것이 특징입니다.

Label: Sync

Label의 우측에 위치하게 되는 Sync Checkbox의 경우 해당 Input에 입력하게될 데이터 정보를 연동하여 자동으로 Sync 해주는 역할로 사용됩니다.

Label: Information

해당 입력 값에 대한 부가적인 정보를 사용자에게 제공하고자 할때 사용됩니다.

Label: Required

해당 입력 값이 필수 값인 경우를 표기하기 위해서 사용 됩니다. Label과 4px 간격을 두고 표기하는 것이 특징이며 필수 값에는 '*'을 표기하고, 필수가 아닌 선택값일 경우에는 별도의 표기 없이 Label만 사용하는 것이 특징입니다. '*'의 값은 Body 2(Inter, Regular, 14px)를 사용하며 Text의 사이즈는 보통 Label의 값과 동일하게 가져가는 것이 특징입니다.

Label: Error(Alert)

해당 입력 값에 대한 에러(alert)을 띄우는 경우로, 입력값에 대한 필수 요건에 대한 설명을 표출해 주는 것이 특징입니다. 별도의 Action (e.g. Confrim Button)후에 표출되는 것이 특징이며 Dropdown Button의 Outline의 색상과 함께 Text Alert을 함께 표출 해주는 것이 특징입니다. Error 상태의 Dropdown Button Outlined Color: Red500을 사용하며, Medium 사이즈의 Alert를 사용합니다.

Label Size

Form에 사용되는 Label이 포함된 Input의 경우 Large Size와 Medium Size의 Primary Type의 Text Input이 사용 되어 집니다. 각 사이즈별 Label의 Typography를 다르게 사용하는 것이 특징입니다.

Unit

Input의 들어가는 값이 Value일 경우, 해당 값의 단위 정보를 Label에 표출하는 것을 원칙으로 합니다. 표출시 Label (Unit)의 방식으로 괄호를 이용하여 표기 하는 것이 특징입니다. Numerical Input의 경우 별도의 Label이 함께 사용되는 경우가 없기 때문에 해당 Input에 단위 표기가 필요한 경우 우측 바깥쪽에 4px의 간격을 두고 위치 시키는 것이 특징입니다.