coss.com Svelte

Textarea

A native textarea element.

Loading p-textarea-1 preview…

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/textarea.json

Usage

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

<Textarea />

Field Integration

Shards UI does not provide a native Textarea part. This component wraps the native <textarea> element in Field.Control internally, so it integrates with Field without another wrapper.

<Field.Root>
  <Field.Label>Bio</Field.Label>
  <Textarea placeholder="Tell us about yourself…" />
  <Field.Description>Write a short bio.</Field.Description>
  <Field.Error>This field is required.</Field.Error>
</Field.Root>

API Reference

Textarea

Styled native textarea element with custom size options.

PropTypeDefaultDescription
size"sm" \| "default" \| "lg" \| number"default"Controls the textarea padding. Number values pass to the native rows attribute
unstyledbooleanfalseRemoves all default styling

Examples

Small Size

Loading p-textarea-2 preview…

Large Size

Loading p-textarea-3 preview…

Disabled

Loading p-textarea-4 preview…

With Label

Loading p-textarea-5 preview…

Form Integration

Loading p-textarea-6 preview…