Podo UI

Podo UI

필드

레이블과 도움말 텍스트를 포함하는 폼 필드 래퍼 컴포넌트입니다.

개요

Field 컴포넌트는 입력 요소에 레이블과 도움말을 쉽게 추가할 수 있도록 도와줍니다.

실제 예제:
로그인에 사용할 이메일 주소를 입력하세요
8자 이상의 비밀번호를 입력하세요

React 사용법

React에서 Field 컴포넌트를 사용하는 방법입니다.

HTML
import { Field } from 'podo-ui';

export default function MyForm() {
  return (
    <div>
      <Field label="이메일" helper="로그인에 사용할 이메일 주소를 입력하세요">
        <input type="email" placeholder="example@email.com" />
      </Field>

      <Field label="비밀번호" helper="8자 이상의 비밀번호를 입력하세요">
        <input type="password" placeholder="비밀번호 입력" />
      </Field>

      <Field label="설명" helper="상세한 설명을 입력하세요">
        <textarea rows={4} placeholder="내용을 입력하세요..."></textarea>
      </Field>

      <Field label="카테고리">
        <select>
          <option value="" disabled selected>카테고리 선택</option>
          <option value="1">옵션 1</option>
          <option value="2">옵션 2</option>
        </select>
      </Field>
    </div>
  );
}

구조

Field 컴포넌트는 다음과 같은 구조로 이루어져 있습니다:

  • label: 입력 필드의 레이블
  • children: 입력 요소 (input, select, textarea 등)
  • helper: 입력 필드에 대한 도움말 텍스트 (선택사항)

SCSS 스타일

podo-ui의 믹스인을 사용하여 Field 스타일을 적용할 수 있습니다.

field.module.scss
@use 'podo-ui/mixin' as *;

.style {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: s(3);

  // 자식 요소 (input, select 등)
  > div.child {
    width: 100%;

    > :not(:last-child) {
      display: inline-block;
      margin-right: s(5);
    }
  }

  // 도움말 텍스트
  > div.helper {
    @include p4;
    color: color(text-sub);
  }
}