Featuring Design System
Legacy

CoreTextArea

텍스트 영역 컴포넌트

Usage

기본 사용법

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

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

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

Label 포함

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

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

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

필수 입력 (Required)

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

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

<CoreTextArea
  label="Label"
  required
  placeholder="Placeholder"
  value={value}
  onChange={(e) => setValue(e.currentTarget.value)}
/>

Label Element (Tooltip)

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

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

<CoreTextArea
  label="Label"
  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)}
/>

글자 수 카운트

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

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

<CoreTextArea
  placeholder="Placeholder"
  value={value}
  onChange={(e) => setValue(e.currentTarget.value)}
  count
  maxLength={100}
/>

상태와 Validation Text

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

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

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

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

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

Helper Text

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

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

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

비활성화 및 읽기 전용

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

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

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

모든 기능 조합

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

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

<CoreTextArea
  label="Label"
  required
  labelElement={
    <CoreTooltip text="It's Label Element">
      <IconInformationFilled color={vars.global.colors.gray[50]} />
    </CoreTooltip>
  }
  count
  maxLength={100}
  status="success"
  validationText="validationText"
  helperText="Helper text"
  placeholder="Placeholder"
  value={value}
  onChange={(e) => setValue(e.currentTarget.value)}
/>

Props

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

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]

TextArea:

  • padding-x: spacing-250 (10px)
  • padding-y: spacing-200 (8px)
  • border-radius: radius-100
  • background-color: background-1
  • typography: body[2]
  • height: 160px
  • resize: vertical
  • overflow: auto
  • word-break: break-all

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 (상태별 토큰)

TextArea:

  • Default: color: text-1, background-color: background-1, border: 1px solid border[1]
  • Focus/Active (status: none): border-color: primary[50]
  • Readonly/Disabled: color: text-1 (readonly), text-4 (disabled), background-color: gray[20], border-color: border[2]
  • Readonly + Focus: border-color: border[2]

Placeholder:

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

Label:

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

Count:

  • 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]

CoreTextInput

텍스트 입력 컴포넌트

CoreSelect

셀렉트 컴포넌트

On this page

Usage기본 사용법Label 포함필수 입력 (Required)Label Element (Tooltip)글자 수 카운트상태와 Validation TextHelper Text비활성화 및 읽기 전용모든 기능 조합PropsCoreStatusType스타일기본 스타일 속성Status VariantsHelper Text & Validation TextStates (상태별 토큰)