Components

Text Field

사용자가 텍스트를 입력할 수 있는 컴포넌트입니다. 레이블, 도움말 텍스트, 에러 메시지 등을 포함하여 다양한 폼 입력 상황에 사용됩니다.

개요

옵션 테이블

속성	값	기본값
size	medium, large, xlarge	medium
label	string
indicator	string
prefix text	string
prefix icon	icon
suffix text	string
suffix icon	icon
placeholder	string
description	string
error message	string
character count	number
max character count	number

스펙

base

상태	슬롯	속성	값
enabled	label	color	$color.fg.neutral
		fontWeight	$font-weight.bold
	indicator	color	$color.fg.neutral
		fontWeight	$font-weight.regular
	field	strokeWidth	1px
		strokeColor	$color.stroke.neutral-weak
	value	color	$color.fg.neutral
	placeholder	color	$color.fg.placeholder
	prefixText	color	$color.fg.neutral
	prefixIcon	color	$color.fg.neutral
	suffixText	color	$color.fg.neutral
	suffixIcon	color	$color.fg.neutral
	description	color	$color.fg.neutral-subtle
		fontWeight	$font-weight.regular
	errorMessage	color	$color.fg.critical
		fontWeight	$font-weight.regular
	characterCount	color	$color.fg.neutral
		fontWeight	$font-weight.regular
	maxCharacterCount	color	$color.fg.neutral-subtle
		fontWeight	$font-weight.regular
focused	field	strokeColor	$color.stroke.neutral-contrast
invalid	field	color	$color.bg.critical-weak
		strokeColor	$color.stroke.critical-weak
invalid, focused	field	color	#00000000
		strokeColor	$color.stroke.neutral-weak
readonly	field	color	$color.bg.disabled
disabled	field	color	$color.bg.disabled
	value	color	$color.fg.disabled
	placeholder	color	$color.fg.disabled
	prefixText	color	$color.fg.disabled
	prefixIcon	color	$color.fg.disabled
	suffixText	color	$color.fg.disabled
	suffixIcon	color	$color.fg.disabled

size=xlarge

상태	슬롯	속성	값
enabled	header	paddingBottom	$dimension.x3
		gap	$dimension.x1_5
	label	fontSize	$font-size.t5
		lineHeight	$line-height.t5
	indicator	fontSize	$font-size.t5
		lineHeight	$line-height.t5
	field	minHeight	56px
		cornerRadius	$radius.r2_5
		gap	$dimension.x2
		paddingX	$dimension.x4
		paddingY	$dimension.x3
	value	fontSize	$font-size.t6
		lineHeight	$line-height.t6
	prefixText	fontSize	$font-size.t6
		lineHeight	$line-height.t6
	prefixIcon	size	$dimension.x5
	suffixText	fontSize	$font-size.t6
		lineHeight	$line-height.t6
	suffixIcon	size	$dimension.x5
	footer	gap	$dimension.x3_5
		paddingTop	$dimension.x2
		minHeight	20px
	description	fontSize	$font-size.t4
		lineHeight	$line-height.t4
	errorMessage	fontSize	$font-size.t4
		lineHeight	$line-height.t4
	errorIcon	size	$dimension.x4
		marginRight	$dimension.x1
	characterCount	fontSize	$font-size.t2
		lineHeight	$line-height.t2
	maxCharacterCount	fontSize	$font-size.t2
		lineHeight	$line-height.t2

size=large

상태	슬롯	속성	값
enabled	header	paddingBottom	$dimension.x3
		gap	$dimension.x1_5
	label	fontSize	$font-size.t5
		lineHeight	$line-height.t5
	indicator	fontSize	$font-size.t5
		lineHeight	$line-height.t5
	field	minHeight	52px
		cornerRadius	$radius.r2_5
		gap	$dimension.x2
		paddingX	$dimension.x4
		paddingY	$dimension.x3
	value	fontSize	$font-size.t5
		lineHeight	$line-height.t5
	prefixText	fontSize	$font-size.t5
		lineHeight	$line-height.t5
	prefixIcon	size	$dimension.x5
	suffixText	fontSize	$font-size.t5
		lineHeight	$line-height.t5
	suffixIcon	size	$dimension.x5
	footer	gap	$dimension.x3_5
		paddingTop	$dimension.x2
		minHeight	20px
	description	fontSize	$font-size.t4
		lineHeight	$line-height.t4
	errorMessage	fontSize	$font-size.t4
		lineHeight	$line-height.t4
	errorIcon	size	$dimension.x4
		marginRight	$dimension.x1
	characterCount	fontSize	$font-size.t2
		lineHeight	$line-height.t2
	maxCharacterCount	fontSize	$font-size.t2
		lineHeight	$line-height.t2

size=medium

상태	슬롯	속성	값
enabled	header	paddingBottom	$dimension.x3
	label	fontSize	$font-size.t4
		lineHeight	$line-height.t4
	indicator	fontSize	$font-size.t4
		lineHeight	$line-height.t4
	field	minHeight	40px
		cornerRadius	$radius.r2
		gap	$dimension.x1_5
		paddingX	$dimension.x3_5
		paddingY	$dimension.x2_5
	value	fontSize	$font-size.t4
		lineHeight	$line-height.t4
	prefixText	fontSize	$font-size.t4
		lineHeight	$line-height.t4
	prefixIcon	size	$dimension.x4
	suffixText	fontSize	$font-size.t4
		lineHeight	$line-height.t4
	suffixIcon	size	$dimension.x4
	footer	gap	$dimension.x3_5
		paddingTop	$dimension.x2
		minHeight	$dimension.x4
	description	fontSize	$font-size.t2
		lineHeight	$line-height.t2
	errorMessage	fontSize	$font-size.t2
		lineHeight	$line-height.t2
	errorIcon	size	$dimension.x3_5
		marginRight	$dimension.x1
	characterCount	fontSize	$font-size.t2
		lineHeight	$line-height.t2
	maxCharacterCount	fontSize	$font-size.t2
		lineHeight	$line-height.t2

Last updated on

Tabs

관련된 콘텐츠 그룹을 구분하고 전환할 수 있게 해주는 컴포넌트입니다. 사용자가 같은 계층의 서로 다른 콘텐츠 영역을 탐색할 때 사용됩니다.

Toggle Button

사용자가 특정 상태를 켜거나 끌 수 있게 해주는 버튼 형태의 컴포넌트입니다. 필터링이나 뷰 전환과 같은 즉각적인 상태 변경에 사용됩니다.

On this page

개요 옵션 테이블 스펙