ドキュメント
Textarea
Textarea
ユーザーがキーボードでカスタムテキストを入力できるテキストエリアです。
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;