Input Button

입력 필드 형태의 버튼으로, 선택창이나 피커를 열 때 사용합니다. 선택이 완료되면 버튼 라벨에 선택된 값이 표시됩니다.

Field

Input Button을 Field 내부에서 사용하여 Select Field로 활용할 수 있습니다.

Anatomy

Input Button의 Anatomy 이미지. Value, Container, Clear Button (Optional), Prefix/Suffix Slot으로 구성됩니다.

Input Button은 Value, 이를 감싸는 Container, Clear Button (Optional), 그리고 Prefix/Suffix Slot으로 구성됩니다.

Properties

State

Input Button의 State - Enabled, Pressed, Error, Error Pressed, Disabled, Read Only

Input Button은 Enabled, Pressed, Error, Error Pressed, Disabled, Read Only 상태를 가집니다.

Value Property

Input Button의 Value Property - Text와 Chip 컴포넌트

Input Button에 값이 있는 경우 Value Property를 사용할 수 있습니다. Value에는 일반 텍스트와 Chip 컴포넌트를 표시할 수 있습니다.

Clear Button Property

Input Button의 Clear Button Property

Input Button에 값이 존재하는 경우, 해당 값을 삭제할 수 있는 Clear Button을 표시할 수 있습니다.

Guidelines

Input Button의 활용

Input Button 활용 예시 - Bottom Sheet나 피커와 함께 사용

Input Button은 Input과 유사한 외형이지만 직접 값을 입력할 수 없는 버튼 컴포넌트입니다. 선택하면 Bottom Sheet나 Picker 등이 열려 값을 선택할 수 있으며, 선택이 완료되면 버튼 라벨에 해당 값이 표시됩니다.

Input Button은 단독으로 사용할 수 없으며, 항상 Bottom Sheet, Date/Time Picker 등 선택 가능한 아이템 목록을 제공하는 UI 요소와 함께 사용해야 합니다.

Specification

base

상태	슬롯	속성	값
enabled	root	strokeWidth
		strokeColor	$color.stroke.neutral-weak 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak)
		color	$color.bg.transparent
		colorDuration	$duration.color-transition
		colorTimingFunction	$timing-function.easing
		strokeDuration enabled 상태의 stroke 위에 invalid 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다.
		strokeTimingFunction	$timing-function.easing
	value	fontWeight	$font-weight.regular
		color	$color.fg.neutral 일반적인 콘텐츠에 사용되는 기본 색상입니다.
	placeholder	fontWeight	$font-weight.regular
		color	$color.fg.placeholder
	prefixText	fontWeight	$font-weight.regular
		color	$color.fg.neutral-subtle 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle)
	prefixIcon	color	$color.fg.neutral-muted 일반적인 콘텐츠에 사용되는 기본 색상입니다. (muted)
	suffixText	fontWeight	$font-weight.regular
		color	$color.fg.neutral-subtle 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle)
	suffixIcon	color	$color.fg.neutral-muted 일반적인 콘텐츠에 사용되는 기본 색상입니다. (muted)
	clearButton	color	$color.fg.neutral-subtle 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle)
pressed	root	color	$color.bg.transparent-pressed
invalid	root	strokeWidth
		strokeColor	$color.stroke.critical-solid 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (solid)
disabled	root	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
readonly	root	color	$color.bg.disabled
	value	color	$color.fg.neutral 일반적인 콘텐츠에 사용되는 기본 색상입니다.
	placeholder	color	$color.fg.placeholder

size=large

뷰포트 너비와 관계없이 사용할 수 있습니다.

상태	슬롯	속성	값
enabled	root	height	$dimension.x13
		gap	$dimension.x2_5
		cornerRadius	$radius.r3
		paddingX	$dimension.x4
	value	fontSize	$font-size.t5
		lineHeight	$line-height.t5
	placeholder	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
	clearButton	size

size=medium

Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.

상태	슬롯	속성	값
enabled	root	height	$dimension.x10
		gap	$dimension.x2
		cornerRadius	$radius.r2
		paddingX	$dimension.x3_5
	value	fontSize	$font-size.t4
		lineHeight	$line-height.t4
	placeholder	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
	clearButton	size	$dimension.x4_5

Input Button

Field

base

size=large

size=medium

On this page