Components

Input

Styled text input field with error message support

Overview

Input is a styled text input field. It supports error message display, full width mode, and disabled state.

Variant — Three styles: default, error, success
Error Message — Displays error text below the input field via the errorMessage prop
Full Width — Takes up the full width of the parent container with isFullWidth

Variants

This field is required

Full Width

Props

Prop	Type	Default	Required	Description
`size`	`'sm' \| 'md' \| 'lg'`	'md'	No	크기
`variant`	`'default' \| 'error' \| 'success'`	'default'	No	상태 표시
`isFullWidth`	`boolean`	true	No	기본 width가 100%라 생략하면 꽉 찬다. false면 auto
`isDisabled`	`boolean`	false	No	비활성 여부
`errorMessage`	`string`	-	No	오류 문구. 지금은 aria-describedby로 입력창과 연결되지 않는다
`value`	`string`	''''	No	값 (제어 컴포넌트)
`onChange`	`(e: ChangeEvent<HTMLInputElement>) => void`	-	No	값이 바뀔 때
`type`	`string`	''text''	No	input type
`name`	`string`	''''	No	input name
`className`	`string`	-	No	추가 CSS 클래스
`ref`	`Ref<HTMLInputElement>`	-	No	input 엘리먼트 ref

Specification

base

상태	요소	속성	값
enabled	root	`color`	`$color.text.default.default`
enabled	root	`backgroundColor`	`$color.background.default.default`
enabled	root	`borderColor`	`$color.background.default.default`
enabled	root	`borderWidth`	`$size.stroke.border`
enabled	root	`borderRadius`	`$size.radius.100`
enabled	root	`padding`	`$size.space.200`
enabled	root	`typography`	`$text.bodyStrong`
enabled	errorText	`color`	`$color.text.danger.default`
enabled	errorText	`typography`	`$text.caption`
enabled	errorText	`marginTop`	`$size.space.100`

variant=default

상태	요소	속성	값
hover	root	`borderColor`	`$color.border.default.default`
focus	root	`strokeWidth`	`$size.stroke.focus`
focus	root	`strokeColor`	`$color.border.brand.default`
focus	root	`outlineStyle`	`none`토큰 아님 — 테두리가 포커스 표시를 대신함
disabled	root	`color`	`$color.text.disabled.default`

Guidelines

When in error state, use variant="error" together with errorMessage
Use isFullWidth in forms to maintain a consistent layout