dodam dodam logo

B1ND Docs

TextField

텍스트 입력을 위한 필드 컴포넌트입니다. 일반 텍스트와 비밀번호 입력을 지원하며, 에러 상태, 비활성화 상태 등 다양한 옵션을 제공합니다.

FilledTextField

배경이 채워진 스타일의 텍스트 필드입니다. 라벨이 항상 표시되며, Material Design의 Filled TextField 스타일을 따릅니다.

Preview

1. 기본 Text 입력

텍스트 입력

입력된 값:

2. Password 입력

비밀번호

입력된 값:

3. Error 상태 (이메일 유효성 검사)

이메일
example@domain.com

4. Disabled 상태

비활성화된 필드

5. 아이콘 숨김

아이콘 없음

6. 커스텀 너비 (300px)

커스텀 너비

7. Required 필드

필수 입력

라벨 옆 빨간 점으로 필수 항목 여부를 표시합니다.

Usage

설치

Terminal
$ pnpm add @b1nd/dodam-design-system/components

@b1nd/dodam-design-system/components 패키지는 @dds-web의 iconography, typography, colors, shapes, themes 패키지에 의존합니다. 프로젝트에 해당 패키지들이 설치되어 있지 않다면, 함께 설치해주세요.

기본 사용법

tsx
"use client";


import { useState } from "react";
import { FilledTextField } from "@b1nd/dodam-design-system/components";


const Example = () => {
  const [text, setText] = useState("");


  return (
    <FilledTextField
      type="text"
      label="텍스트 입력"
      placeholder="텍스트를 입력하세요"
      value={text}
      onChange={(e) => setText(e.target.value)}
    />
  );
};


export default Example;

Password 필드

tsx
<FilledTextField
  type="password"
  label="비밀번호"
  placeholder="비밀번호를 입력하세요"
  value={password}
  onChange={(e) => setPassword(e.target.value)}
/>

Error 상태

tsx
<FilledTextField
  type="text"
  label="이메일"
  placeholder="example@domain.com"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  isError={hasError}
  supportingText="올바른 이메일 형식이 아닙니다."
/>

비활성화 상태

tsx
<FilledTextField
  type="text"
  label="비활성화된 필드"
  placeholder="비활성화된 필드"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  isDisabled
/>

커스텀 스타일

tsx
<FilledTextField
  type="text"
  label="커스텀 스타일"
  placeholder="텍스트를 입력하세요"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  customStyle={{
    backgroundColor: "#f5f5f5",
  }}
/>

Required 필드

tsx
<FilledTextField
  type="text"
  label="필수 입력"
  placeholder="필수 항목입니다"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  required
/>

Props

PropTypeDefaultDescription
type"text" | "password"-입력 필드 타입
labelstring-필드 라벨
valuestring-입력 값
placeholderstring-플레이스홀더 텍스트
onChangeChangeEventHandler-값 변경 이벤트 핸들러
isErrorbooleanfalse에러 상태 여부
widthnumber-필드 너비 (px)
namestring-input 요소의 name 속성
isDisabledbooleanfalse비활성화 상태 여부
supportingTextstring-필드 하단에 표시되는 도움말 텍스트
showIconbooleantrue아이콘 표시 여부 (clear, error, password toggle)
customStyleCSSObject-커스텀 스타일 객체
onKeyDownKeyboardEventHandler-키보드 이벤트 핸들러
onRemoveClick() => void-클리어 아이콘 클릭 핸들러
requiredbooleanfalse필수 입력 여부. true일 때 라벨 옆에 빨간 점이 표시됩니다.

TextField

아웃라인 스타일의 텍스트 필드입니다. 라벨이 필드 내부에 위치하며, 포커스 시 위로 이동하는 Material Design의 Outlined TextField 스타일을 따릅니다.

Preview

1. 기본 Text 입력

입력된 값:

2. Password 입력

입력된 값:

3. Enter 키 이벤트

4. Error 상태 (이메일 유효성 검사)

example@domain.com

5. Disabled 상태 (빈 값)

6. 아이콘 숨김

7. 커스텀 너비 (300px)

8. 커스텀 Label 스타일

9. Required 필드

라벨 옆 빨간 점으로 필수 항목 여부를 표시합니다.

Usage

기본 사용법

tsx
"use client";


import { useState } from "react";
import { TextField } from "@b1nd/dodam-design-system/components";


const Example = () => {
  const [text, setText] = useState("");


  return (
    <TextField
      id="text-field-1"
      name="text"
      type="text"
      value={text}
      onChange={(e) => setText(e.target.value)}
      label="텍스트를 입력하세요"
    />
  );
};


export default Example;

Password 필드

tsx
<TextField
  id="password-field-1"
  name="password"
  type="password"
  value={password}
  onChange={(e) => setPassword(e.target.value)}
  label="비밀번호를 입력하세요"
/>

Enter 키 이벤트

tsx
<TextField
  id="enter-field-1"
  name="text"
  type="text"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  onKeyDown={(e) => {
    alert(`입력된 값: ${e.currentTarget.value}`);
  }}
  label="Enter를 눌러보세요"
/>

Error 상태

tsx
<TextField
  id="email-field-1"
  name="email"
  type="text"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  isError={hasError}
  supportingText="올바른 이메일 형식이 아닙니다."
  label="이메일"
/>

커스텀 라벨 스타일

tsx
<TextField
  id="custom-field-1"
  name="custom"
  type="text"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  label="커스텀 라벨"
  labelStyle={{
    color: "#008BFF",
    fontWeight: "bold",
  }}
/>

Required 필드

tsx
<TextField
  id="required-field-1"
  name="required"
  type="text"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  label="필수 입력"
  required
/>

Props

PropTypeDefaultDescription
idstring-input 요소의 id 속성
namestring-input 요소의 name 속성
type"text" | "password"-입력 필드 타입
valuestring-입력 값
labelstring"텍스트를 입력하세요."필드 라벨
onChangeChangeEventHandler-값 변경 이벤트 핸들러
isErrorbooleanfalse에러 상태 여부
showIconbooleantrue아이콘 표시 여부 (clear, error, password toggle)
onKeyDownKeyboardEventHandler-키보드 이벤트 핸들러 (Enter 키 전용)
isDisabledbooleanfalse비활성화 상태 여부
labelStyleCSSProperties-라벨 커스텀 스타일
widthnumber-필드 너비 (px)
supportingTextstring-필드 하단에 표시되는 도움말 텍스트
customStyleCSSObject-커스텀 스타일 객체
onRemoveClick() => void-클리어 아이콘 클릭 핸들러
requiredbooleanfalse필수 입력 여부. true일 때 라벨 옆에 빨간 점이 표시됩니다.

특징

비밀번호 표시/숨김 토글

type="password"로 설정하면 자동으로 비밀번호 표시/숨김 토글 아이콘이 표시됩니다.

자동 클리어 아이콘

type="text"일 때 값이 입력되면 자동으로 클리어 아이콘이 표시됩니다. 클릭하면 onRemoveClick 핸들러가 호출됩니다.

에러 상태 아이콘

isError={true}로 설정하면 에러 아이콘이 표시됩니다.

아이콘 비활성화

showIcon={false}로 설정하면 모든 아이콘이 표시되지 않습니다.