CoreTextInput

레거시 텍스트 입력 컴포넌트. TextInput으로 마이그레이션을 권장합니다.

개요

마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는 TextInput을 사용하세요.

CoreTextInput은 label, helper text, validation 상태를 내장한 단일 컴포넌트 기반 텍스트 입력 필드입니다.

2가지 size — md (32px), lg (40px)
4가지 status — none, success, warning, error
leadingElement / trailingElement — 입력 필드 앞뒤에 아이콘 배치
label, helperText, validationText — 내장 레이아웃 지원
readOnly — 읽기 전용 상태 스타일 처리

Usage

기본 사용법

() => {
const [value, setValue] = React.useState('');
return (
  <CoreTextInput
    placeholder="입력하세요"
    value={value}
    onChange={(e) => setValue(e.currentTarget.value)}
  />
);
}

Label과 필수 표시

() => {
const [value, setValue] = React.useState('');
return (
  <VStack $css={{ gap: '12px' }}>
    <CoreTextInput
      label="이메일"
      id="email"
      placeholder="example@featuring.co"
      value={value}
      onChange={(e) => setValue(e.currentTarget.value)}
    />
    <CoreTextInput
      label="이름"
      id="name"
      required
      placeholder="홍길동"
      value={value}
      onChange={(e) => setValue(e.currentTarget.value)}
    />
  </VStack>
);
}

상태와 Validation Text

<VStack $css={{ gap: '12px' }}>
<CoreTextInput
  label="성공"
  status="success"
  validationText="사용 가능한 이메일입니다"
  value="user@example.com"
  readOnly
/>
<CoreTextInput
  label="경고"
  status="warning"
  validationText="비밀번호가 약합니다"
  value="password"
  readOnly
/>
<CoreTextInput
  label="오류"
  status="error"
  validationText="이미 사용 중인 이메일입니다"
  value="taken@example.com"
  readOnly
/>
</VStack>

Leading / Trailing Element

() => {
const [value, setValue] = React.useState('');
return (
  <VStack $css={{ gap: '12px' }}>
    <CoreTextInput
      placeholder="검색"
      leadingElement={<IconSearchOutline />}
      value={value}
      onChange={(e) => setValue(e.currentTarget.value)}
    />
    <CoreTextInput
      placeholder="입력하세요"
      value={value}
      onChange={(e) => setValue(e.currentTarget.value)}
      trailingElement={
        <IconCloseOutline
          style={{ cursor: 'pointer' }}
          onClick={() => setValue('')}
        />
      }
    />
  </VStack>
);
}

비활성화 및 읽기 전용

<VStack $css={{ gap: '12px' }}>
<CoreTextInput label="Disabled" value="비활성 값" disabled />
<CoreTextInput label="Read Only" value="읽기 전용 값" readOnly />
</VStack>

크기 비교

() => {
const [value, setValue] = React.useState('');
return (
  <VStack $css={{ gap: '12px' }}>
    <CoreTextInput
      label="md (32px)"
      size="md"
      placeholder="medium"
      value={value}
      onChange={(e) => setValue(e.currentTarget.value)}
    />
    <CoreTextInput
      label="lg (40px)"
      size="lg"
      placeholder="large"
      value={value}
      onChange={(e) => setValue(e.currentTarget.value)}
    />
  </VStack>
);
}

Props

ComponentPropsWithoutRef<'input'>을 확장한 컴포넌트입니다.

Prop

Type

CoreTextInputSize

Prop

Type

CoreStatusType

Prop

Type

스타일

Size Variants

Size	Height
`md`	`32px`
`lg`	`40px`

Status — 테두리 색상

Status	Border Color
`none`	`border[1]` (포커스 시 `primary[50]`)
`success`	`support-success[3]`
`warning`	`support-warning[3]`
`error`	`support-error[3]`

States — 상태별 토큰

상태	배경색	테두리	텍스트
Default	`background-1`	`border[1]`	`text-1`
Focus	`background-1`	`primary[50]`	`text-1`
Readonly	`background[4]`	`border[2]`	`text-1`
Disabled	`background[4]`	`border[2]`	`text[4]`

마이그레이션 가이드

TextInput은 Compound composition 패턴으로 label/helper/validation 영역을 자유롭게 배치할 수 있습니다.

Before / After

// Before (CoreTextInput)
<CoreTextInput
  label="이메일"
  required
  placeholder="example@featuring.co"
  status="error"
  validationText="이미 사용 중인 이메일입니다"
  value={value}
  onChange={(e) => setValue(e.currentTarget.value)}
/>

// After (TextInput)
// TextInput은 Field 컴포넌트와 조합해서 사용합니다.
<Field.Root>
  <Field.Label required>이메일</Field.Label>
  <TextInput.Root status="error">
    <TextInput.Input
      placeholder="example@featuring.co"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  </TextInput.Root>
  <Field.Message>이미 사용 중인 이메일입니다</Field.Message>
</Field.Root>

변경 사항

CoreTextInput	TextInput + Field
`label` prop	`Field.Label` 서브컴포넌트
`required` prop	`Field.Label`의 `required`
`helperText`	`Field.HelperText` 서브컴포넌트
`validationText`	`Field.Message` (status에 따라 error/warning 색상 자동 적용)
`leadingElement`	`TextInput.LeadingElement`
`trailingElement`	`TextInput.TrailingElement`
`wrapperClassName`	`Field.Root`의 `className`

On this page