Podo UI

Podo UI

Textarea

A component for multi-line text input.

Basic Usage

Textarea is an input element that can accept multiple lines of text.

HTML
<textarea placeholder="Enter your content..."></textarea>
<textarea placeholder="Enter your content..." rows="5"></textarea>
<textarea placeholder="Disabled" disabled></textarea>
Live Example:

Resizing

By default, textarea is resizable. You can disable resizing using resize: none.

HTML
<!-- Resizable -->
<textarea rows="4" placeholder="You can resize this"></textarea>

<!-- Fixed (resize: none) -->
<textarea class="resize-none" rows="4" placeholder="This is fixed size"></textarea>
Live Example:
SCSS
textarea.resize-none {
  resize: none;
}

States

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

HTML
<!-- Default -->
<textarea placeholder="Default"></textarea>

<!-- Success -->
<textarea class="success">This is valid input.</textarea>

<!-- Danger -->
<textarea class="danger">This is invalid input.</textarea>

<!-- Disabled -->
<textarea placeholder="Disabled" disabled></textarea>

<!-- Read-only -->
<textarea readonly>This content cannot be modified.</textarea>
Live Example:
SCSS
// Success 상태 (border: 1px solid color('success'))
textarea.success {
  border: 1px solid color('success');

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

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

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

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

// Read-only 상태 (border: none, resize: none)
textarea:read-only {
  border: none;
  resize: none;
}

SCSS Styling

You can apply textarea styles using podo-ui mixins.

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

// 기본 textarea 스타일
textarea {
  @include p3;
  padding: s(3) s(4);
  background-color: color('bg-block');
  border: 1px solid color('border');
  border-radius: r(2);

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

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

// 크기 조절 방지
textarea.resize-none {
  resize: none;
}

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

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

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

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

// 비활성화 상태
textarea:disabled {
  background: color('bg-disabled');
  cursor: not-allowed;
}

// 읽기 전용 상태
textarea:read-only {
  border: none;
  resize: none;
}

Usage Examples

Check out real-world usage examples.

Comment Form
0 / 500 characters
Feedback Form