Displays a form textarea or a component that looks like a textarea.
1<script lang="ts">
2import { Textarea } from "@/components/ui/textarea"
3</script>
4
Installation
pnpm dlx sprawlify@latest add textareanpx sprawlify@latest add textareayarn sprawlify@latest add textareabunx --bun sprawlify@latest add textarea
Install the following dependencies:
pnpm add @sprawlify/primitives @sprawlify/sveltenpm install @sprawlify/primitives @sprawlify/svelteyarn add @sprawlify/primitives @sprawlify/sveltebun add @sprawlify/primitives @sprawlify/svelte
Add the following files to your project:
1export { default as Textarea } from "./textarea.svelte";21<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLTextareaAttributes } from "svelte/elements"
5
6interface Props extends HTMLTextareaAttributes, PolymorphicProps<"textarea"> {}
7
8let { class: className, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12 as="textarea"
13 data-scope="textarea"
14 data-part="root"
15 data-slot="textarea"
16 class={cn(
17 "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-input/30 px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
18 className
19 )}
20 {...rest}
21/>Update the import paths to match your project setup.
Usage
1import { Textarea } from "@/components/ui/textarea"1<Textarea />Examples
Button
Pair with Button to create a textarea with a submit button.
1<script lang="ts">
2import { Button } from "@/components/ui/button"
3import { Textarea } from "@/components/ui/textarea"
4</script>
Disabled
Use the disabled prop to disable the textarea. To style the disabled state, add the data-disabled attribute to the Field component.
1<script lang="ts">
2import { Field, FieldLabel } from "@/components/ui/field"
3import { Textarea } from "@/components/ui/textarea"
4</script>
Field
Use Field, FieldLabel, and FieldDescription to create a textarea with a label and description.
1<script lang="ts">
2import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
3import { Textarea } from "@/components/ui/textarea"
4</script>
Invalid
Use the aria-invalid prop to mark the textarea as invalid. To style the invalid state, add the data-invalid attribute to the Field component.
1<script lang="ts">
2import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
3import { Textarea } from "@/components/ui/textarea"
4</script>