Featuring Design System
Legacy

CoreTextInput

텍스트 입력 컴포넌트

Usage

기본 사용법

import { useState } from 'react';
import { CoreTextInput } from '@featuring-corp/components';

const [value, setValue] = useState('');

<CoreTextInput
  placeholder="Placeholder"
  value={value}
  onChange={(e) => setValue(e.currentTarget.value)}
/>

Label 포함

import { useState } from 'react';
import { CoreTextInput } from '@featuring-corp/components';

const [value, setValue] = useState('');

<CoreTextInput
  label="Label"
  id="text-input-with-label"
  placeholder="Placeholder"
  value={value}
  onChange={(e) => setValue(e.currentTarget.value)}
/>

필수 입력 (Required)

import { useState } from 'react';
import { CoreTextInput } from '@featuring-corp/components';

const [value, setValue] = useState('');

<CoreTextInput
  label="Label"
  id="text-input-required"
  required
  placeholder="Placeholder"
  value={value}
  onChange={(e) => setValue(e.currentTarget.value)}
/>

Label Element (Tooltip)

import { useState } from 'react';
import { CoreTextInput } from '@featuring-corp/components';
import { CoreTooltip } from '@featuring-corp/components';
import { IconInformationFilled, IconHelpFilled } from '@featuring-corp/icons';
import { vars } from '@styles/theme.css';

const [value, setValue] = useState('');

<CoreTextInput
  label="Label"
  id="text-input-with-label-element"
  labelElement={
    <CoreTooltip text="It's Label Element">
      <IconInformationFilled color={vars.global.colors.gray[50]} />
    </CoreTooltip>
  }
  placeholder="Placeholder"
  value={value}
  onChange={(e) => setValue(e.currentTarget.value)}
/>

Leading Element

import { useState } from 'react';
import { CoreTextInput } from '@featuring-corp/components';
import { IconSearchOutline } from '@featuring-corp/icons';

const [value, setValue] = useState('');

<CoreTextInput
  placeholder="검색..."
  leadingElement={<IconSearchOutline />}
  value={value}
  onChange={(e) => setValue(e.currentTarget.value)}
/>

Trailing Element

import { useState } from 'react';
import { CoreTextInput } from '@featuring-corp/components';
import { IconCloseOutline } from '@featuring-corp/icons';

const [value, setValue] = useState('');

<CoreTextInput
  placeholder="Placeholder"
  value={value}
  onChange={(e) => setValue(e.currentTarget.value)}
  trailingElement={
    <IconCloseOutline
      onClick={() => {
        setValue('');
      }}
    />
  }
/>

Secondary Label

import { useState } from 'react';
import { CoreTextInput } from '@featuring-corp/components';

const [value, setValue] = useState('');

<CoreTextInput
  placeholder="Placeholder"
  value={value}
  onChange={(e) => setValue(e.currentTarget.value)}
  secondaryLabel="15:05"
/>

상태와 Validation Text

import { useState } from 'react';
import { CoreTextInput } from '@featuring-corp/components';

const [value, setValue] = useState('');

// Success
<CoreTextInput
  label="Label"
  placeholder="Placeholder"
  value={value}
  onChange={(e) => setValue(e.currentTarget.value)}
  status="success"
  validationText="성공 메시지"
/>

// Warning
<CoreTextInput
  label="Label"
  placeholder="Placeholder"
  value={value}
  onChange={(e) => setValue(e.currentTarget.value)}
  status="warning"
  validationText="경고 메시지"
/>

// Error
<CoreTextInput
  label="Label"
  placeholder="Placeholder"
  value={value}
  onChange={(e) => setValue(e.currentTarget.value)}
  status="error"
  validationText="에러 메시지"
/>

Helper Text

import { useState } from 'react';
import { CoreTextInput } from '@featuring-corp/components';

const [value, setValue] = useState('');

<CoreTextInput
  label="Label"
  placeholder="Placeholder"
  value={value}
  onChange={(e) => setValue(e.currentTarget.value)}
  helperText="Helper text"
/>

크기 설정

import { useState } from 'react';
import { CoreTextInput } from '@featuring-corp/components';

const [value, setValue] = useState('');

<CoreTextInput
  label="Label"
  size="md"
  placeholder="Placeholder"
  value={value}
  onChange={(e) => setValue(e.currentTarget.value)}
/>

<CoreTextInput
  label="Label"
  size="lg"
  placeholder="Placeholder"
  value={value}
  onChange={(e) => setValue(e.currentTarget.value)}
/>

비활성화 및 읽기 전용

import { CoreTextInput } from '@featuring-corp/components';

// Disabled
<CoreTextInput
  label="Label"
  placeholder="Placeholder"
  value="Disabled value"
  disabled
/>

// Read Only
<CoreTextInput
  label="Label"
  value="Read only value"
  readOnly
/>

모든 기능 조합

import { useState } from 'react';
import { CoreTextInput } from '@featuring-corp/components';
import { CoreTooltip } from '@featuring-corp/components';
import { IconSearchOutline, IconCloseOutline, IconInformationFilled } from '@featuring-corp/icons';
import { vars } from '@styles/theme.css';

const [value, setValue] = useState('');

<CoreTextInput
  label="Label"
  id="text-input-with-all"
  required
  labelElement={
    <CoreTooltip text="It's Label Element">
      <IconInformationFilled color={vars.global.colors.gray[50]} />
    </CoreTooltip>
  }
  size="md"
  status="success"
  validationText="validationText"
  helperText="Helper text"
  leadingElement={<IconSearchOutline />}
  secondaryLabel="15:05"
  trailingElement={
    <IconCloseOutline
      onClick={() => {
        setValue('');
      }}
    />
  }
  placeholder="Placeholder"
  value={value}
  onChange={(e) => setValue(e.currentTarget.value)}
/>

Props

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

Prop

Type

CoreTextInputSize

Prop

Type

CoreStatusType

Prop

Type

스타일

기본 스타일 속성

Wrapper:

  • display: flex
  • flex-direction: column
  • align-items: stretch
  • width: 100% (기본값)

Label:

  • display: flex
  • justify-content: flex-start
  • align-items: center
  • margin-bottom: spacing-150 (6px)
  • width: 100%
  • typography: heading[1]

Input Container:

  • display: flex
  • justify-content: flex-start
  • align-items: center
  • border-radius: radius-100
  • padding-x: spacing-250 (10px)
  • background-color: background-1
  • typography: body[2]

Input:

  • width: 100%
  • cursor: auto

Size Variants

SizeHeight
md32px
lg40px

Status Variants

StatusBorder Color
noneborder[1] (focus/active 시 primary[50])
successsupport.success[3]
warningsupport.warning[3]
errorsupport.error[3]

Helper Text & Validation Text

  • margin-top: spacing-100 (4px)
  • typography: body[1]
  • gap: spacing-100 (4px) (validation text)

States (상태별 토큰)

Input Container:

  • Default: color: text-1, background-color: background-1, border: 1px solid border[1]
  • Focus/Active (readonly가 아닐 때): border-color: primary[50]
  • Readonly: color: text-1, background-color: background[4], border-color: border[2]
  • Readonly + Focus/Active: border-color: border[2]
  • Disabled: color: text[4], background-color: background[4], border-color: border[2]

Input:

  • Placeholder: color: text[5]
  • Disabled Placeholder: color: text[4]
  • Readonly Placeholder: color: text[4]

Label:

  • Default: color: text-2
  • Disabled: color: text-4

Validation Text:

  • None: color: transparent
  • Success: color: support-success[3]
  • Warning: color: support-warning[3]
  • Error: color: support-error[3]

CoreButton

버튼 컴포넌트

CoreTextArea

텍스트 영역 컴포넌트

On this page

Usage기본 사용법Label 포함필수 입력 (Required)Label Element (Tooltip)Leading ElementTrailing ElementSecondary Label상태와 Validation TextHelper Text크기 설정비활성화 및 읽기 전용모든 기능 조합PropsCoreTextInputSizeCoreStatusType스타일기본 스타일 속성Size VariantsStatus VariantsHelper Text & Validation TextStates (상태별 토큰)