Podo UI

Podo UI

입력

다양한 형태의 텍스트 입력을 위한 컴포넌트입니다.

Import

@use 'podo-ui/scss/atom/input';

기본 사용법

input은 다양한 타입의 텍스트 입력을 받을 수 있습니다.

HTML
<input type="text" placeholder="텍스트를 입력하세요" />
<input type="email" placeholder="이메일을 입력하세요" />
<input type="password" placeholder="비밀번호를 입력하세요" />
<input type="number" placeholder="숫자를 입력하세요" />
실제 예제:

입력 타입

input은 다양한 타입을 지원합니다.

실제 예제:

상태

input은 기본, 성공, 위험, 비활성화, 읽기 전용 상태를 지원합니다.

HTML
<!-- 기본 상태 -->
<input type="text" placeholder="기본 상태" />

<!-- 성공 -->
<input type="text" class="success" value="valid@email.com" />

<!-- 위험 -->
<input type="text" class="danger" value="invalid-email" />

<!-- 비활성화 -->
<input type="text" placeholder="비활성화" disabled />

<!-- 읽기 전용 -->
<input type="text" value="읽기 전용 값" readonly />
실제 예제:

변형

input은 다양한 스타일 변형을 제공합니다.

HTML
<input type="text" placeholder="기본 (테두리)" />
<input type="text" class="fill" placeholder="채움 (배경 색상)" />
<input type="text" class="text" placeholder="텍스트 (테두리 없음)" />
<input type="text" class="underline" placeholder="밑줄 (하단 테두리만)" />
실제 예제:

크기

input은 다양한 크기를 지원합니다.

HTML
<input type="text" placeholder="기본 크기" />
<input type="text" class="md" placeholder="중간 크기" />
<input type="text" class="lg" placeholder="큰 크기" />
실제 예제:

아이콘

input에 아이콘을 추가할 수 있습니다.

HTML
<div class="with-icon">
  <i class="icon-search"></i>
  <input type="text" placeholder="검색..." />
</div>

<div class="with-right-icon">
  <input type="email" placeholder="이메일" />
  <i class="icon-mail"></i>
</div>
실제 예제:

SCSS 스타일

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

input[type='text'],
input[type='email'],
input[type='password'] {
  @include p3;
  padding: s(3) s(4);
  background-color: color('bg-block');
  border-radius: r(3);
  border: 1px solid color('border-disabled');

  &:focus-visible:not(:disabled) {
    border-color: color('primary-base');
    outline: 4px solid color('primary-outline');
  }

  &::placeholder {
    color: color('placeholder');
  }
}

input.success {
  border: 1px solid color('success');
}

input.danger {
  border: 1px solid color('danger');
}