Podo UI

Podo UI

텍스트 영역

여러 줄 텍스트 입력을 위한 컴포넌트입니다.

기본 사용법

textarea는 여러 줄의 텍스트를 입력받을 수 있는 입력 요소입니다.

HTML
<textarea placeholder="내용을 입력하세요..."></textarea>
<textarea placeholder="내용을 입력하세요..." rows="5"></textarea>
<textarea placeholder="비활성화됨" disabled></textarea>
실제 예제:

크기 조절

기본적으로 textarea는 크기 조절이 가능합니다. resize: none을 사용하여 크기 조절을 비활성화할 수 있습니다.

HTML
<!-- 크기 조절 가능 -->
<textarea rows="4" placeholder="크기를 조절할 수 있습니다"></textarea>

<!-- 크기 고정 (resize: none) -->
<textarea class="resize-none" rows="4" placeholder="크기가 고정되어 있습니다"></textarea>
실제 예제:
SCSS
textarea.resize-none {
  resize: none;
}

상태

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

HTML
<!-- 기본 -->
<textarea placeholder="기본"></textarea>

<!-- 성공 -->
<textarea class="success">유효한 입력입니다.</textarea>

<!-- 위험 -->
<textarea class="danger">잘못된 입력입니다.</textarea>

<!-- 비활성화 -->
<textarea placeholder="비활성화" disabled></textarea>

<!-- 읽기 전용 -->
<textarea readonly>이 내용은 수정할 수 없습니다.</textarea>
실제 예제:
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 스타일

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

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;
}

활용 예제

실제 사용 예제를 확인해보세요.

댓글 작성 폼
0 / 500자
피드백 폼