Docs
Textarea
Textarea
Displays a form textarea or a component that looks like a textarea.
Loading...
<script lang="ts">
import { Textarea } from "$lib/components/ui/textarea";
</script>
<Textarea placeholder="Type your message here." />
<script lang="ts">
import { Textarea } from "$lib/components/ui/textarea";
</script>
<Textarea placeholder="Type your message here." />
Installation
npx shadcn-svelte@latest add textarea
Usage
<script lang="ts">
import { Textarea } from "$lib/components/ui/textarea";
</script>
<Textarea />
Examples
Default
Loading...
<script lang="ts">
import { Textarea } from "$lib/components/ui/textarea";
</script>
<Textarea placeholder="Type your message here." />
<script lang="ts">
import { Textarea } from "$lib/components/ui/textarea";
</script>
<Textarea placeholder="Type your message here." />
Disabled
Loading...
<script lang="ts">
import { Textarea } from "$lib/components/ui/textarea";
</script>
<Textarea disabled placeholder="Type your message here." />
<script lang="ts">
import { Textarea } from "$lib/components/ui/textarea";
</script>
<Textarea disabled placeholder="Type your message here." />
With Label
Loading...
<script lang="ts">
import { Label } from "$lib/components/ui/label";
import { Textarea } from "$lib/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 "$lib/components/ui/label";
import { Textarea } from "$lib/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 "$lib/components/ui/label";
import { Textarea } from "$lib/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 "$lib/components/ui/label";
import { Textarea } from "$lib/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 "$lib/components/ui/button";
import { Textarea } from "$lib/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 "$lib/components/ui/button";
import { Textarea } from "$lib/components/ui/textarea";
</script>
<div class="grid w-full gap-2">
<Textarea placeholder="Type your message here." />
<Button>Send message</Button>
</div>
Form
When using the textarea in a form, you'll want to use the <Form.Textarea /> component, which is a wrapper around your existing <Textarea /> with some additional functionality for seamless form integration.
Loading...
<script lang="ts" context="module">
import { z } from "zod";
export const formSchema = z.object({
bio: z
.string()
.min(10, "Bio must be at least 10 characters.")
.max(160, "Bio must be at most 160 characters.")
});
export type FormSchema = typeof formSchema;
</script>
<script lang="ts">
import { page } from "$app/stores";
import * as Form from "$lib/components/ui/form";
import type { SuperValidated } from "sveltekit-superforms";
export let form: SuperValidated<FormSchema> = $page.data.textarea;
</script>
<Form.Root
{form}
schema={formSchema}
let:config
method="POST"
action="?/textarea"
class="w-2/3 space-y-6"
>
<Form.Field {config} name="bio">
<Form.Item>
<Form.Label>Bio</Form.Label>
<Form.Textarea
placeholder="Tell us a little bit about yourself"
class="resize-none"
/>
<Form.Description>
You can <span>@mention</span> other users and organizations.
</Form.Description>
<Form.Validation />
</Form.Item>
</Form.Field>
<Form.Button>Submit</Form.Button>
</Form.Root>
<script lang="ts" context="module">
import { z } from "zod";
export const formSchema = z.object({
bio: z
.string()
.min(10, "Bio must be at least 10 characters.")
.max(160, "Bio must be at most 160 characters.")
});
export type FormSchema = typeof formSchema;
</script>
<script lang="ts">
import { page } from "$app/stores";
import * as Form from "$lib/components/ui/form";
import type { SuperValidated } from "sveltekit-superforms";
export let form: SuperValidated<FormSchema> = $page.data.textarea;
</script>
<Form.Root
{form}
schema={formSchema}
let:config
method="POST"
action="?/textarea"
class="w-2/3 space-y-6"
debug={true}
>
<Form.Field {config} name="bio">
<Form.Item>
<Form.Label>Bio</Form.Label>
<Form.Textarea
placeholder="Tell us a little bit about yourself"
class="resize-none"
/>
<Form.Description>
You can <span>@mention</span> other users and organizations.
</Form.Description>
<Form.Validation />
</Form.Item>
</Form.Field>
<Form.Button>Submit</Form.Button>
</Form.Root>
On This Page