문서
텍스트 영역
텍스트 영역
사용자가 키보드로 사용자 정의 텍스트를 입력할 수 있는 텍스트 영역입니다.
import { TextArea } from "@repo/tailwindcss/ui/textarea";
import { TextFieldRoot } from "@repo/tailwindcss/ui/textfield";
const TextareaDemo = () => {
return (
<TextFieldRoot class="w-full max-w-xs">
<TextArea placeholder="Type your message here." />
</TextFieldRoot>
);
};
export default TextareaDemo;설치
npx shadcn-solid@latest add textarea다음 의존성을 설치하세요
npm install @kobalte/core다음 코드를 복사하여 프로젝트에 붙여넣으세요
import { cn } from "@/libs/cn";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type { TextFieldTextAreaProps } from "@kobalte/core/text-field";
import { TextArea as TextFieldPrimitive } from "@kobalte/core/text-field";
import type { ValidComponent, VoidProps } from "solid-js";
import { splitProps } from "solid-js";
type textAreaProps<T extends ValidComponent = "textarea"> = VoidProps<
TextFieldTextAreaProps<T> & {
class?: string;
}
>;
export const TextArea = <T extends ValidComponent = "textarea">(
props: PolymorphicProps<T, textAreaProps<T>>,
) => {
const [local, rest] = splitProps(props as textAreaProps, ["class"]);
return (
<TextFieldPrimitive
class={cn(
"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-shadow placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
local.class,
)}
{...rest}
/>
);
};다음 의존성을 설치하세요
npm install @kobalte/core다음 코드를 복사하여 프로젝트에 붙여넣으세요
import { cn } from "@/libs/cn";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type { TextFieldTextAreaProps } from "@kobalte/core/text-field";
import { TextArea as TextFieldPrimitive } from "@kobalte/core/text-field";
import type { ValidComponent, VoidProps } from "solid-js";
import { splitProps } from "solid-js";
type textAreaProps<T extends ValidComponent = "textarea"> = VoidProps<
TextFieldTextAreaProps<T> & {
class?: string;
}
>;
export const TextArea = <T extends ValidComponent = "textarea">(
props: PolymorphicProps<T, textAreaProps<T>>,
) => {
const [local, rest] = splitProps(props as textAreaProps, ["class"]);
return (
<TextFieldPrimitive
class={cn(
"flex min-h-[60px] w-full rounded-md border border-input bg-inherit px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:(outline-none ring-1.5 ring-ring) disabled:(cursor-not-allowed opacity-50) transition-shadow",
local.class,
)}
{...rest}
/>
);
};사용법
import { TextArea } from "@/components/ui/textarea";
import { TextFieldRoot } from "@/components/ui/textfield";<TextFieldRoot>
<TextArea />
</TextFieldRoot>예제
비활성화
import { TextArea } from "@repo/tailwindcss/ui/textarea";
import { TextFieldRoot } from "@repo/tailwindcss/ui/textfield";
const TextareaDisabled = () => {
return (
<TextFieldRoot class="w-full max-w-xs" disabled>
<TextArea placeholder="Type your message here." />
</TextFieldRoot>
);
};
export default TextareaDisabled;레이블 포함
import { TextArea } from "@repo/tailwindcss/ui/textarea";
import { TextFieldLabel, TextFieldRoot } from "@repo/tailwindcss/ui/textfield";
const TextareaWithLabel = () => {
return (
<TextFieldRoot class="w-full max-w-xs">
<TextFieldLabel>Your message</TextFieldLabel>
<TextArea placeholder="Type your message here." />
</TextFieldRoot>
);
};
export default TextareaWithLabel;텍스트 포함
import { TextArea } from "@repo/tailwindcss/ui/textarea";
import {
TextFieldDescription,
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/ui/textfield";
const TextareaWithText = () => {
return (
<TextFieldRoot class="w-full max-w-xs">
<TextFieldLabel>Your message</TextFieldLabel>
<TextArea placeholder="Type your message here." />
<TextFieldDescription>Enter your email address.</TextFieldDescription>
</TextFieldRoot>
);
};
export default TextareaWithText;버튼 포함
import { Button } from "@repo/tailwindcss/ui/button";
import { TextArea } from "@repo/tailwindcss/ui/textarea";
import { TextFieldRoot } from "@repo/tailwindcss/ui/textfield";
const TextareaWithButton = () => {
return (
<div class="flex w-full max-w-sm flex-col items-center gap-2">
<TextFieldRoot class="w-full">
<TextArea placeholder="Type your message here." />
</TextFieldRoot>
<Button type="submit" class="w-full">
Send message
</Button>
</div>
);
};
export default TextareaWithButton;