Docs
Textarea
Textarea
Displays a form textarea or a component that looks like a textarea.
Loading...
<script lang="ts">
import { Textarea } from "@/components/ui/textarea";
</script>
<Textarea placeholder="Type your message here." />
<script lang="ts">
import { Textarea } from "@/components/ui/textarea";
</script>
<Textarea placeholder="Type your message here." />
Installation
npx shadcn-svelte add textarea
Usage
<script lang="ts">
import { Textarea } from "$components/ui/textarea";
</script>
<Textarea />
Examples
Default
Loading...
<script lang="ts">
import { Textarea } from "@/components/ui/textarea";
</script>
<Textarea placeholder="Type your message here." />
<script lang="ts">
import { Textarea } from "@/components/ui/textarea";
</script>
<Textarea placeholder="Type your message here." />
Disabled
Loading...
<script lang="ts">
import { Textarea } from "@/components/ui/textarea";
</script>
<Textarea disabled placeholder="Type your message here." />
<script lang="ts">
import { Textarea } from "@/components/ui/textarea";
</script>
<Textarea disabled placeholder="Type your message here." />
With Label
Loading...
<script lang="ts">
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
</script>
<div class="grid w-full gap-1.5">
<Label for="message">Your message</Label>
<Textarea placeholder="Type your message here." id="message" />
</div>
<script lang="ts">
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
</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
Loading...
<script lang="ts">
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
</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-sm text-muted-foreground">
Your message will be copied to the support team.
</p>
</div>
<script lang="ts">
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
</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-sm text-muted-foreground">
Your message will be copied to the support team.
</p>
</div>
With Button
Loading...
<script lang="ts">
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
</script>
<div class="grid w-full gap-2">
<Textarea placeholder="Type your message here." />
<Button>Send message</Button>
</div>
<script lang="ts">
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
</script>
<div class="grid w-full gap-2">
<Textarea placeholder="Type your message here." />
<Button>Send message</Button>
</div>
On This Page