Podo UI

Podo UI

텍스트 영역

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

Import

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

기본 사용법

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

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

상태

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

HTML
<textarea placeholder="기본"></textarea>
<textarea class="success">유효한 입력입니다.</textarea>
<textarea class="danger">잘못된 입력입니다.</textarea>
<textarea disabled></textarea>
<textarea readonly>이 내용은 수정할 수 없습니다.</textarea>
실제 예제:

크기 조절

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

HTML
<!-- 크기 조절 가능 -->
<textarea rows="4"></textarea>

<!-- 크기 고정 -->
<textarea class="resize-none" rows="4"></textarea>
실제 예제:

SCSS 스타일

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

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

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

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