<script lang="ts">
import { Textarea } from "$lib/components/ui/textarea/index.js";
</script>
<Textarea placeholder="Type your message here." />Installation
pnpm dlx shadcn-svelte@latest add textareaCopy and paste the following code into your project.
import Root from './textarea.svelte';
export {
Root,
//
Root as Textarea
};
<script lang="ts">
import { cn, type WithElementRef, type WithoutChildren } from '$UTILS$.js';
import type { HTMLTextareaAttributes } from 'svelte/elements';
let {
ref = $bindable(null),
value = $bindable(),
class: className,
'data-slot': dataSlot = 'textarea',
...restProps
}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
</script>
<textarea
bind:this={ref}
data-slot={dataSlot}
class={cn(
'border-zinc-800 bg-zinc-900 text-zinc-50 placeholder:text-zinc-500 focus-visible:border-zinc-300 focus-visible:ring-2 focus-visible:ring-zinc-300/25 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 resize-none rounded-none border px-3 py-2.5 text-base transition-[color,border-color,box-shadow] md:text-sm flex field-sizing-content min-h-20 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50',
className
)}
bind:value
{...restProps}></textarea>
Usage
<script lang="ts">
import { Textarea } from '$lib/components/ui/textarea/index.js';
</script><Textarea />Examples
Default
<script lang="ts">
import { Textarea } from "$lib/components/ui/textarea/index.js";
</script>
<Textarea placeholder="Type your message here." />Disabled
<script lang="ts">
import { Textarea } from "$lib/components/ui/textarea/index.js";
</script>
<Textarea disabled placeholder="Type your message here." />With Label
<script lang="ts">
import { Label } from "$lib/components/ui/label/index.js";
import { Textarea } from "$lib/components/ui/textarea/index.js";
</script>
<div class="grid w-full gap-1.5">
<Label for="message">Your message</Label>
<Textarea placeholder="Type your message here." id="message" />
</div>With Text
Your message will be copied to the support team.
<script lang="ts">
import { Label } from "$lib/components/ui/label/index.js";
import { Textarea } from "$lib/components/ui/textarea/index.js";
</script>
<div class="grid w-full gap-1.5">
<Label for="message-2">Your Message</Label>
<Textarea placeholder="Type your message here." id="message-2" />
<p class="text-muted-foreground text-sm">
Your message will be copied to the support team.
</p>
</div>With Button
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
import { Textarea } from "$lib/components/ui/textarea/index.js";
</script>
<div class="grid w-full gap-2">
<Textarea placeholder="Type your message here." />
<Button>Send message</Button>
</div>