Docs
Textarea
Textarea
A textarea that allow users to input custom text entries with a keyboard.
import { TextArea } from "@repo/tailwindcss/default/textarea";
import { TextFieldRoot } from "@repo/tailwindcss/default/textfield";
const TextareaDemo = () => {
return (
<TextFieldRoot class="w-full max-w-xs">
<TextArea placeholder="Type your message here." />
</TextFieldRoot>
);
};
export default TextareaDemo;import { TextArea } from "@repo/tailwindcss/solid/textarea";
import { TextFieldRoot } from "@repo/tailwindcss/solid/textfield";
const TextareaDemo = () => {
return (
<TextFieldRoot class="w-full max-w-xs">
<TextArea placeholder="Type your message here." />
</TextFieldRoot>
);
};
export default TextareaDemo;Installation
npx shadcn-solid@latest add textareaInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Usage
import { TextArea } from "@/components/ui/textarea";
import { TextFieldRoot } from "@/components/ui/textfield";<TextFieldRoot>
<TextArea />
</TextFieldRoot>Examples
Disabled
import { TextArea } from "@repo/tailwindcss/default/textarea";
import { TextFieldRoot } from "@repo/tailwindcss/default/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/solid/textarea";
import { TextFieldRoot } from "@repo/tailwindcss/solid/textfield";
const TextareaDisabled = () => {
return (
<TextFieldRoot class="w-full max-w-xs" disabled>
<TextArea placeholder="Type your message here." />
</TextFieldRoot>
);
};
export default TextareaDisabled;With Label
import { TextArea } from "@repo/tailwindcss/default/textarea";
import {
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/default/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/solid/textarea";
import {
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/solid/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;With Text
import { TextArea } from "@repo/tailwindcss/default/textarea";
import {
TextFieldDescription,
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/default/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 { TextArea } from "@repo/tailwindcss/solid/textarea";
import {
TextFieldDescription,
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/solid/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;With Button
import { Button } from "@repo/tailwindcss/default/button";
import { TextArea } from "@repo/tailwindcss/default/textarea";
import { TextFieldRoot } from "@repo/tailwindcss/default/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;import { Button } from "@repo/tailwindcss/solid/button";
import { TextArea } from "@repo/tailwindcss/solid/textarea";
import { TextFieldRoot } from "@repo/tailwindcss/solid/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;