Field

Anatomy

Field는 Header, Input, Footer 세 영역으로 구성됩니다.

• Header에는 Label, Requirement Mark, 필요 시 Suffix Slot에 Sub Action이 포함됩니다.
• Input은 Text Input, Textarea, Input Button 등 실제 입력 UI가 들어오는 영역입니다.
• Footer는 Helper Text, Error Message, Character Count를 통해 보조 정보를 제공합니다.

Properties

Header Property

Label은 Medium과 Bold 두 가지 Weight를 제공합니다. Label 텍스트는 명사형으로 작성하고 마침표를 사용하지 않으며, 한 줄로 표현하는 것이 좋습니다. 필요한 경우에만 최대 두 줄까지 사용할 수 있습니다.

Label 우측에 필수 입력 여부를 표시할 수 있습니다. 필수 값은 Requirement Mark로, 선택 값은 Text로 표시합니다.

Suffix Slot은 Label 우측에 위치하며, Ghost Button이나 Icon을 통해 보조 액션 기능을 제공합니다.

Input Slot

Input Slot에는 실제 값을 입력받는 다양한 Input 컴포넌트를 배치할 수 있습니다.

SEED에서 제공하는 Input 컴포넌트는 아래와 같으며, 이들을 조합하여 Template 형태로 제공합니다.

특수한 포맷이나 마스킹 등의 기능이 필요한 경우, 포맷과 동작을 직접 정의해서 사용할 수 있습니다.

Footer Property

Footer 좌측에는 Helper Text와 Error Message가 위치하며, 우측에는 Character Count를 표시할 수 있습니다.

Error Message와 Helper Text가 동시에 존재할 경우 Error Message만 표시합니다. 메시지는 행동 지시형으로 간결하게 작성해주세요. (예: "휴대폰 번호 10-11자리로 입력해 주세요")

Character Count는 값이 있을 때 Neutral 컬러로 표시됩니다. 입력 길이에 제한이 있는 경우에만 사용해주세요.

Guidelines

Form의 구성

Field 컴포넌트를 사용하려면 먼저 Form의 기본 구조를 이해해야 합니다. Form은 사용자로부터 입력값을 받기 위한 구조로, 크게 네 가지 요소로 구성되어 있습니다.

• Input: UI에서 실제 입력을 담당하는 요소입니다.
• Field: Header, Input, Footer를 하나로 묶어 제공하는 요소입니다.
• Fieldset: 여러 Field를 하나의 섹션으로 묶는 컨테이너입니다.
• Form: Input, Field, Fieldset 등 입력 요소의 값을 제출하고 유효성을 검증하는 컨테이너입니다.

제출(Submit)과 검증(Validation)

Form은 Input에 입력된 값이 유효한지 검증(Validation)하고 값을 전달(Submit)하는 과정을 거칩니다.

검증(Validation)은 일반적으로 두 가지 방식이 있으며, 상황에 따라 혼합하여 사용할 수 있습니다. 필수 값이나 글자 수 확인 등의 단순한 검증은 인라인 방식을, 비즈니스 로직이나 서버 규칙은 제출 시 검증을 적용합니다. 보안이나 금융 정보와 같이 오입력 위험이 큰 필드는 즉시 피드백을 제공하는 인라인 검증을 권장합니다.

제출 시 검증 (Validation on Submit)

Submit 버튼을 클릭하면 검증을 진행합니다. Submit 버튼은 조건 충족 여부에 따라 활성화되거나 항상 활성화 상태로 유지될 수 있습니다. 기본적으로는 제출 시 전체 검증 방식을 사용합니다.

인라인 검증 (Inline validation)

Field 단위로 검증을 진행합니다. Input 요소에서 Focus가 떠난 경우(blur) 또는 값이 변경될 때마다(change/update) 입력값을 검증합니다. 한 화면에 필드가 많아 오류 누적을 방지해야 하는 경우에 사용합니다.

이탈 시 안내

작성, 수정 화면에 진입한 후에 다시 이탈하려는 경우 입력된 값이 지워질 수 있다는 경고 안내를 Alert Dialog 등을 통해 표시해야 합니다.

값의 변화가 없거나 자동 저장 기능이 있는 경우에는 안내를 생략할 수 있습니다.

필수 입력 여부 표시하기

한 화면에서 필드의 2/3 이상이 필수 항목이면 '선택'만 표시하고, 그렇지 않으면 '*'만 사용합니다. 한 Form 내에서는 두 표기법을 혼용하지 않습니다.

단일 화면에서 Form 구성하기

어떤 엔티티를 생성, 수정할 때 활용할 수 있는 UX 패턴입니다. Form은 엔티티의 데이터를 입력하거나 수정할 수 있도록 구성되어 있어야 합니다. 생성(Create) Form과 수정(Update) Form은 가능하면 동일한 구성을 유지해야 합니다.

단계별 Form 구성하기

이전 단계에서 선택한 옵션에 추가적인 데이터 입력이나 수정이 필요한 경우 활용할 수 있는 UX 패턴입니다. 모바일 화면이 여러 개의 Form, Input으로 복잡해지는 경우에도 활용할 수 있습니다.

상황이나 구성하고자 하는 플로우에 따라서 단일 화면 Form과 혼합해서 구성할 수 있습니다.

Field V3 변경점

• Text Field, Multiline Text Field처럼 개별 컴포넌트로 제공하던 요소들을 Field 컴포넌트와 하위 Input 컴포넌트의 조합으로 제공합니다.

Specification

Field

base

상태	슬롯	속성	값
enabled	root	gap	$dimension.x2
	header	paddingX	$dimension.x0_5
		gap	$dimension.x2_5
	indicatorIcon	color	$color.fg.critical
		size	6px (0.375rem)
		paddingTop	4px (0.25rem)
		paddingLeft	2px (0.125rem)
	indicatorText	color	$color.fg.neutral-subtle
		fontSize	$font-size.t4
		lineHeight	$line-height.t5
		fontWeight	$font-weight.regular
		paddingLeft	4px (0.25rem)
	footer	paddingX	$dimension.x0_5
		gap	$dimension.x2
	description	color	$color.fg.neutral-subtle
		fontWeight	$font-weight.regular
		fontSize	$font-size.t4
		lineHeight	$line-height.t4
	descriptionIcon	paddingRight	$dimension.x1_5
		color	$color.fg.neutral-subtle
		size	$dimension.x4
	errorMessage	color	$color.fg.critical
		fontWeight	$font-weight.regular
		fontSize	$font-size.t4
		lineHeight	$line-height.t4
	errorIcon	paddingRight	$dimension.x1_5
		color	$color.fg.critical
		size	$dimension.x4
	characterCount	color	$color.fg.neutral
		fontWeight	$font-weight.regular
		fontSize	$font-size.t4
		lineHeight	$line-height.t4
	maxCharacterCount	color	$color.fg.neutral-subtle
		fontWeight	$font-weight.regular
		fontSize	$font-size.t4
		lineHeight	$line-height.t4
invalid	characterCount	color	$color.fg.critical
	maxCharacterCount	color	$color.fg.critical

Field Label

base

상태	슬롯	속성	값
enabled	root	color	$color.fg.neutral
		fontSize	$font-size.t5
		lineHeight	$line-height.t5

weight=medium

상태	슬롯	속성	값
enabled	root	fontWeight	$font-weight.medium

weight=bold

상태	슬롯	속성	값
enabled	root	fontWeight	$font-weight.bold