컴포넌트
Textarea
여러 줄의 텍스트를 입력합니다.
설치
pnpm dlx ply-ui add textarea공통 설치 설정을 먼저 적용합니다.
사용법
여러 줄의 텍스트를 입력합니다. label로 이름을 연결하고 rows로 표시할 줄 수를 지정합니다. controlSize로 글자 크기를, variant로 배경과 테두리를 지정합니다. Input과 같은 값을 사용합니다.
비활성
disabled로 입력을 막습니다. 읽기와 복사는 허용하려면 readOnly를 사용합니다.
크기와 오류 상태
rows로 줄 수를 지정합니다. aria-invalid="true"는 오류 테두리를 표시하며, aria-describedby로 오류 설명을 연결합니다. 기본 최소 높이는 100px입니다.
속성
속성
타입
구현 코드
components/ui/textarea.tsx
import type { ComponentProps } from "react";
import { cx } from "../../lib/cx";
import "./textarea.css";
export type TextareaProps = ComponentProps<"textarea"> & {
/** Input과 동일한 글자 크기입니다. @defaultValue "lg" */
controlSize?: "sm" | "md" | "lg";
/** 입력 영역의 배경과 테두리입니다. @defaultValue "standard" */
variant?: "standard" | "contrast" | "utility";
};
export function Textarea({
className,
controlSize = "lg",
variant = "standard",
rows = 4,
...props
}: TextareaProps) {
return (
<textarea
{...props}
rows={rows}
data-size={controlSize}
data-variant={variant}
className={cx("rbx-input rbx-textarea", className)}
/>
);
}
components/ui/textarea.css
@layer theme, base, components, utilities;
@layer components.ply-base, components.ply;
@layer components.ply {
/* textarea — semantic HTML composition. */
.rbx-textarea.rbx-input {
height: auto;
padding-block: 12px;
min-height: 100px;
resize: vertical;
}
}