Input

Installation

pnpm add @teamsparta/stack-input

yarn add @teamsparta/stack-input

사용법

기본 컴포넌트 사용

@teamsparta/stack-input 패키지는 기본적으로 TextInput과 TextArea 컴포넌트를 제공합니다.

import { TextInput, TextArea } from "@teamsparta/stack-input";

function MyForm() {
  return (
    <form>
      <TextInput label='이름' placeholder='이름을 입력하세요' required />
      <TextArea
        label='메시지'
        placeholder='메시지를 입력하세요'
        minHeight={100}
      />
    </form>
  );
}

커스텀 컴포넌트 구성

더 세밀한 제어가 필요한 경우 @teamsparta/stack-input/extends 패키지를 사용하여 자체 입력 컴포넌트를 구성할 수 있습니다.

import {
  InputProvider,
  InputHeader,
  InputField,
  InputLabel,
  InputFooter,
  InputErrorMessage,
} from "@teamsparta/stack-input/extends";

function CustomInput({ label, error, ...props }) {
  return (
    <InputProvider>
      <InputHeader>
        <InputLabel>{label}</InputLabel>
      </InputHeader>
      <InputField {...props} />
      <InputFooter>
        {error && <InputErrorMessage>{error}</InputErrorMessage>}
      </InputFooter>
    </InputProvider>
  );
}