8.0k New

Textarea

Previous Next

Displays a form textarea or a component that looks like a textarea.

Epicenter

Local-first, open source apps

Special Sponsor 
<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 textarea

Usage 

<script lang="ts">
  import { Textarea } from "$lib/components/ui/textarea/index.js";
</script>
<Textarea />

Field

Use Field.Field, Field.Label, and Field.Description to create a textarea with a label and description.

Enter your message below.

<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
  import { Textarea } from "$lib/components/ui/textarea/index.js";
</script>
 
<Field.Field>
  <Field.Label for="textarea-message">Message</Field.Label>
  <Field.Description>Enter your message below.</Field.Description>
  <Textarea id="textarea-message" placeholder="Type your message here." />
</Field.Field>

Disabled

Use the disabled prop to disable the textarea. To style the disabled state, add the data-disabled attribute to the Field.Field component.

<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
  import { Textarea } from "$lib/components/ui/textarea/index.js";
</script>
 
<Field.Field data-disabled>
  <Field.Label for="textarea-disabled">Message</Field.Label>
  <Textarea
    id="textarea-disabled"
    placeholder="Type your message here."
    disabled
  />
</Field.Field>

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.Field component.

Please enter a valid message.

<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
  import { Textarea } from "$lib/components/ui/textarea/index.js";
</script>
 
<Field.Field data-invalid>
  <Field.Label for="textarea-invalid">Message</Field.Label>
  <Textarea
    id="textarea-invalid"
    placeholder="Type your message here."
    aria-invalid
  />
  <Field.Description>Please enter a valid message.</Field.Description>
</Field.Field>

Button

Pair with Button to create a textarea with a submit 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>