Podo UI

Podo UI

필드

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

Import

@use 'podo-ui/scss/molecule/field';

basicUsage.title

basicUsage.description

HTML
<div class="field">
  <label>이메일</label>
  <div class="child">
    <input type="email" placeholder="example@email.com" />
  </div>
  <div class="helper">로그인에 사용할 이메일 주소를 입력하세요</div>
</div>

<div class="field">
  <label>비밀번호</label>
  <div class="child">
    <input type="password" placeholder="비밀번호 입력" />
  </div>
  <div class="helper">8자 이상의 비밀번호를 입력하세요</div>
</div>
실제 예제:
로그인에 사용할 이메일 주소를 입력하세요
8자 이상의 비밀번호를 입력하세요

SCSS 스타일

SCSS
@use 'podo-ui/mixin' as *;

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

  // Child element wrapper
  > div.child {
    width: 100%;

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

  // Helper text
  > div.helper {
    @include p4;
    color: color(text-sub);
  }
}