Podo UI

Podo UI

Input

A component for various types of text input.

Basic Usage

Input can accept various types of text input.

HTML
<input type="text" placeholder="Enter text" />
<input type="email" placeholder="Enter email" />
<input type="password" placeholder="Enter password" />
<input type="number" placeholder="Enter number" />
Live Example:

Input Types

Input supports various types.

HTML
<input type="text" placeholder="Text input" />
<input type="email" placeholder="Email address" />
<input type="password" placeholder="Password" />
<input type="number" placeholder="Number" />
<input type="tel" placeholder="Phone number" />
<input type="url" placeholder="Website URL" />
<input type="search" placeholder="Search..." />
<input type="date" />
<input type="time" />
<input type="month" />
<input type="week" />
<input type="datetime-local" />
Live Example:

States

Input supports default, success, danger, disabled, and read-only states.

HTML
<!-- Default -->
<input type="text" placeholder="Default" />

<!-- Success -->
<input type="text" class="success" value="[email protected]" />

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

<!-- Disabled -->
<input type="text" placeholder="Disabled" disabled />

<!-- Read-only -->
<input type="text" value="Read-only value" readonly />
Live Example:
SCSS
// Success 상태 (border: 1px solid color('success'))
input.success {
  border-color: color('success');

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

// Danger 상태 (border: 1px solid color('danger'))
input.danger {
  border-color: color('danger');

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

// Disabled 상태
input:disabled {
  background: color('bg-disabled');
  cursor: not-allowed;
}

// Read-only 상태
input:read-only {
  border: none;
  cursor: default;
}

Variants

Input provides various style variants.

HTML
<!-- Default (Border) -->
<input type="text" placeholder="Default (Border)" />

<!-- Fill (Background color) -->
<input type="text" class="fill" placeholder="Fill (Background color)" />

<!-- Text (No border) -->
<input type="text" class="text" placeholder="Text (No border)" />

<!-- Underline (Bottom border only) -->
<input type="text" class="underline" placeholder="Underline (Bottom border only)" />
Live Example:
SCSS
// Fill 변형 (background-color: color('default-fill'))
input.fill {
  background-color: color('default-fill');
}

// Text 변형 (border: none)
input.text {
  border: none;
}

// Underline 변형 (border-bottom만 표시, border-radius: 0)
input.underline {
  border: none;
  border-bottom: 1px solid color('border-disabled');
  border-radius: 0;

  &:focus-visible:not(:disabled) {
    border-bottom-color: color('primary-base');
  }
}

Sizes

Input supports various sizes.

HTML
<!-- Default size (padding: s(3) s(4), border-radius: r(3)) -->
<input type="text" placeholder="Default size" />

<!-- Medium size (padding: s(4) s(4), border-radius: r(5)) -->
<input type="text" class="md" placeholder="Medium size" />

<!-- Large size (padding: s(5) s(4), border-radius: r(6)) -->
<input type="text" class="lg" placeholder="Large size" />
Live Example:
SCSS
// 기본 크기
input {
  padding: s(3) s(4);
  border-radius: r(3);
}

// 중간 크기
input.md {
  padding: s(4) s(4);
  border-radius: r(5);
}

// 큰 크기
input.lg {
  padding: s(5) s(4);
  border-radius: r(6);
}

Icons

You can add icons to inputs.

HTML
<!-- Left icon (input padding-left: s(8), Icon left: s(3)) -->
<div class="with-icon">
  <i class="icon-search"></i>
  <input type="text" placeholder="Search..." />
</div>

<!-- Right icon (input padding-right: s(7), Icon right: s(3)) -->
<div class="with-right-icon">
  <input type="email" placeholder="Email" />
  <i class="icon-mail"></i>
</div>
Live Example:
SCSS
// 왼쪽 아이콘
.with-icon {
  position: relative;

  > i {
    position: absolute;
    left: s(3);
    top: 50%;
    transform: translateY(-50%);
  }

  > input {
    padding-left: s(8);  // 아이콘 공간 확보
  }
}

// 오른쪽 아이콘
.with-right-icon {
  position: relative;

  > i {
    position: absolute;
    right: s(3);
    top: 50%;
    transform: translateY(-50%);
  }

  > input {
    padding-right: s(7);  // 아이콘 공간 확보
  }
}

SCSS Styling

You can apply input styles using podo-ui mixins.

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

// 기본 input 스타일
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');
  }
}

// Success/Danger 상태
input.success {
  border: 1px solid color('success');

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

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

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

// 크기 변형
input.md {
  padding: s(4) s(4);
  border-radius: r(5);
}

input.lg {
  padding: s(5) s(4);
  border-radius: r(6);
}