Components

Text Field

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.

개요

옵션 테이블

속성	값	기본값
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

링크

React

Text Field 컴포넌트를 React로 사용하는 방법을 설명합니다. (Text Field)

React

Text Field 컴포넌트를 React로 사용하는 방법을 설명합니다. (Multiline Text Field)

스펙

base

상태	슬롯	속성	값
enabled	label	color	$color.fg.neutral
		fontWeight	$font-weight.bold
	indicator	color	$color.fg.neutral
		fontWeight	$font-weight.regular
	field	color	$color.bg.layer-default
		strokeWidth	1px
		strokeColor	$color.stroke.field
	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.field-focused
invalid	field	color	$color.bg.critical-weak
		strokeColor	$color.stroke.critical
invalid, focused	field	color	$color.bg.layer-default
		strokeColor	$color.stroke.field
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

Tabs

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.

Toggle Button

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.