Simple textarea </div> ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/textareas/textarea-01.svelte) ## textarea-02 > A type-safe, accessible textarea-02 component for building modern UIs. This component is part of the textareas collection. ### Core Information - **Component ID**: `textarea-02` - **Location**: `/src/lib/components/textareas/textarea-02.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte <script lang="ts"> import Label from '$lib/components/ui/label.svelte'; import Textarea from '$lib/components/ui/textarea.svelte'; const uid = $props.id(); </script> <div class="space-y-2"> <Label for={uid}> Required textarea <span class="text-destructive">*</span> </Label> <Textarea id={uid} placeholder="Leave a message" required /> </div> ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/textareas/textarea-02.svelte) ## textarea-03 > A type-safe, accessible textarea-03 component for building modern UIs. This component is part of the textareas collection. ### Core Information - **Component ID**: `textarea-03` - **Location**: `/src/lib/components/textareas/textarea-03.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte <script lang="ts"> import Label from '$lib/components/ui/label.svelte'; import Textarea from '$lib/components/ui/textarea.svelte'; const uid = $props.id(); </script> <div class="space-y-2"> <Label for={uid}>Textarea with helper text</Label> <Textarea id={uid} placeholder="Leave a comment" /> <p class="mt-2 text-xs text-muted-foreground" role="region" aria-live="polite"> Please add as many details as you can </p> </div> ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/textareas/textarea-03.svelte) ## textarea-04 > A type-safe, accessible textarea-04 component for building modern UIs. This component is part of the textareas collection. ### Core Information - **Component ID**: `textarea-04` - **Location**: `/src/lib/components/textareas/textarea-04.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte <script lang="ts"> import Label from '$lib/components/ui/label.svelte'; import Textarea from '$lib/components/ui/textarea.svelte'; const uid = $props.id(); </script> <div class="mb-2 flex items-center justify-between gap-1"> <Label for={uid} class="mb-0">Textarea with hint</Label> <span class="text-sm text-muted-foreground">Optional</span> </div> <Textarea id={uid} placeholder="Leave a comment" /> ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/textareas/textarea-04.svelte) ## textarea-05 > A type-safe, accessible textarea-05 component for building modern UIs. This component is part of the textareas collection. ### Core Information - **Component ID**: `textarea-05` - **Location**: `/src/lib/components/textareas/textarea-05.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte <script lang="ts"> import Label from '$lib/components/ui/label.svelte'; import Textarea from '$lib/components/ui/textarea.svelte'; const uid = $props.id(); </script> <div class="space-y-2" style:--ring="234 89% 74%"> <Label for={uid}>Textarea with colored border and ring</Label> <Textarea id={uid} placeholder="Leave a comment" /> </div> ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/textareas/textarea-05.svelte) ## textarea-06 > A type-safe, accessible textarea-06 component for building modern UIs. This component is part of the textareas collection. ### Core Information - **Component ID**: `textarea-06` - **Location**: `/src/lib/components/textareas/textarea-06.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte <script lang="ts"> import Label from '$lib/components/ui/label.svelte'; import Textarea from '$lib/components/ui/textarea.svelte'; const uid = $props.id(); </script> <div class="space-y-2"> <Label for={uid}>Textarea with error</Label> <Textarea id={uid} class="border-destructive/80 text-destructive focus-visible:border-destructive/80 focus-visible:ring-destructive/30" placeholder="Leave a comment" value="Hello!" /> <p class="mt-2 text-xs text-destructive" role="alert" aria-live="polite"> Message should be at least 10 characters </p> </div> ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/textareas/textarea-06.svelte) ## textarea-07 > A type-safe, accessible textarea-07 component for building modern UIs. This component is part of the textareas collection. ### Core Information - **Component ID**: `textarea-07` - **Location**: `/src/lib/components/textareas/textarea-07.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte <script lang="ts"> import Label from '$lib/components/ui/label.svelte'; import Textarea from '$lib/components/ui/textarea.svelte'; const uid = $props.id(); </script> <div class="space-y-2"> <Label for={uid}>Textarea with gray background</Label> <Textarea id={uid} class="border-transparent bg-muted shadow-none" placeholder="Leave a comment" /> </div> ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/textareas/textarea-07.svelte) ## textarea-08 > A type-safe, accessible textarea-08 component for building modern UIs. This component is part of the textareas collection. ### Core Information - **Component ID**: `textarea-08` - **Location**: `/src/lib/components/textareas/textarea-08.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte <script lang="ts"> import Label from '$lib/components/ui/label.svelte'; import Textarea from '$lib/components/ui/textarea.svelte'; const uid = $props.id(); </script> <div class="space-y-2"> <Label for={uid}>Shorter textarea</Label> <Textarea id={uid} class="min-h-[none]" placeholder="Leave a comment" rows={2} /> </div> ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/textareas/textarea-08.svelte) ## textarea-09 > A type-safe, accessible textarea-09 component for building modern UIs. This component is part of the textareas collection. ### Core Information - **Component ID**: `textarea-09` - **Location**: `/src/lib/components/textareas/textarea-09.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte <script lang="ts"> import Label from '$lib/components/ui/label.svelte'; import Textarea from '$lib/components/ui/textarea.svelte'; const uid = $props.id(); </script> <div class="space-y-2"> <Label for={uid}>Disabled textarea</Label> <Textarea id={uid} disabled placeholder="Leave a comment" /> </div> ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/textareas/textarea-09.svelte) ## textarea-10 > A type-safe, accessible textarea-10 component for building modern UIs. This component is part of the textareas collection. ### Core Information - **Component ID**: `textarea-10` - **Location**: `/src/lib/components/textareas/textarea-10.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte <script lang="ts"> import Button from '$lib/components/ui/button.svelte'; import Label from '$lib/components/ui/label.svelte'; import Textarea from '$lib/components/ui/textarea.svelte'; const uid = $props.id(); </script> <div class="space-y-2"> <Label for={uid}>Textarea with left button</Label> <Textarea id={uid} placeholder="Leave a comment" /> <Button variant="outline">Send</Button> </div> ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/textareas/textarea-10.svelte) ## textarea-11 > A type-safe, accessible textarea-11 component for building modern UIs. This component is part of the textareas collection. ### Core Information - **Component ID**: `textarea-11` - **Location**: `/src/lib/components/textareas/textarea-11.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte <script lang="ts"> import Button from '$lib/components/ui/button.svelte'; import Label from '$lib/components/ui/label.svelte'; import Textarea from '$lib/components/ui/textarea.svelte'; const uid = $props.id(); </script> <div class="space-y-2"> <Label for={uid}>Textarea with right button</Label> <Textarea id={uid} placeholder="Leave a comment" /> <div class="flex justify-end"> <Button variant="outline">Send</Button> </div> </div> ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/textareas/textarea-11.svelte) ## textarea-12 > A type-safe, accessible textarea-12 component for building modern UIs. This component is part of the textareas collection. ### Core Information - **Component ID**: `textarea-12` - **Location**: `/src/lib/components/textareas/textarea-12.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte <script lang="ts"> import Button from '$lib/components/ui/button.svelte'; import Label from '$lib/components/ui/label.svelte'; import Textarea from '$lib/components/ui/textarea.svelte'; const uid = $props.id(); </script> <div class="space-y-2"> <Label for={uid}>Textarea with button</Label> <Textarea id={uid} placeholder="Leave a comment" /> <Button variant="outline" class="w-full">Send</Button> </div> ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/textareas/textarea-12.svelte) ## textarea-13 > A type-safe, accessible textarea-13 component for building modern UIs. This component is part of the textareas collection. ### Core Information - **Component ID**: `textarea-13` - **Location**: `/src/lib/components/textareas/textarea-13.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte <script lang="ts"> import Label from '$lib/components/ui/label.svelte'; import Textarea from '$lib/components/ui/textarea.svelte'; const uid = $props.id(); </script> <div class="group relative"> <Label for={uid} class="absolute start-1 top-0 z-10 block -translate-y-1/2 bg-background px-2 text-xs font-medium text-foreground group-has-[:disabled]:opacity-50" > Textarea with overlapping label </Label> <Textarea id={uid} /> </div> ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/textareas/textarea-13.svelte) ## textarea-14 > A type-safe, accessible textarea-14 component for building modern UIs. This component is part of the textareas collection. ### Core Information - **Component ID**: `textarea-14` - **Location**: `/src/lib/components/textareas/textarea-14.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte <script lang="ts"> import Textarea from '$lib/components/ui/textarea.svelte'; const uid = $props.id(); </script> <div class="group relative"> <label for={uid} class="has-[+textarea:not(:placeholder-shown)):-translate-y-1/2 origin-start absolute top-0 block translate-y-2 cursor-text px-1 text-sm text-muted-foreground/70 transition-all group-focus-within:pointer-events-none group-focus-within:top-0 group-focus-within:-translate-y-1/2 group-focus-within:cursor-default group-focus-within:text-xs group-focus-within:font-medium group-focus-within:text-foreground has-[+textarea:not(:placeholder-shown)]:pointer-events-none has-[+textarea:not(:placeholder-shown)]:top-0 has-[+textarea:not(:placeholder-shown)]:cursor-default has-[+textarea:not(:placeholder-shown)]:text-xs has-[+textarea:not(:placeholder-shown)]:font-medium has-[+textarea:not(:placeholder-shown)]:text-foreground" > <span class="inline-flex bg-background px-2">Textarea with label animation</span> </label> <Textarea id={uid} placeholder="" /> </div> ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/textareas/textarea-14.svelte) ## textarea-15 > A type-safe, accessible textarea-15 component for building modern UIs. This component is part of the textareas collection. ### Core Information - **Component ID**: `textarea-15` - **Location**: `/src/lib/components/textareas/textarea-15.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte <script lang="ts"> const uid = $props.id(); </script> <div class="relative rounded-lg border border-input bg-background shadow-sm shadow-black/[.04] ring-offset-background transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30 focus-within:ring-offset-2 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 [&:has(input:is(:disabled))_*]:pointer-events-none" > <label for={uid} class="block px-3 pt-2 text-xs font-medium text-foreground"> Textarea with inset label </label> <textarea id={uid} class="flex min-h-[70px] w-full bg-transparent px-3 pb-2 text-sm text-foreground placeholder:text-muted-foreground/70 focus-visible:outline-none" >

Textarea with characters left <p id="{uid}-characters-left-textarea" class="mt-2 text-right text-xs text-muted-foreground" role="status" aria-live="polite" > <span class="tabular-nums">{characterLimit.maxLength - characterLimit.characterCount}</span> characters left </p> </div> ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/textareas/textarea-16.svelte) ## textarea-17 > A type-safe, accessible textarea-17 component for building modern UIs. This component is part of the textareas collection. ### Core Information - **Component ID**: `textarea-17` - **Location**: `/src/lib/components/textareas/textarea-17.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte <script lang="ts"> import Label from '$lib/components/ui/label.svelte'; import Textarea from '$lib/components/ui/textarea.svelte'; const uid = $props.id(); </script> <div class="space-y-2"> <Label for={uid}>Textarea with no resize</Label> <Textarea id={uid} class="[resize:none]" placeholder="Leave a comment" /> </div> ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/textareas/textarea-17.svelte) ## textarea-18 > A type-safe, accessible textarea-18 component for building modern UIs. This component is part of the textareas collection. ### Core Information - **Component ID**: `textarea-18` - **Location**: `/src/lib/components/textareas/textarea-18.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte <script lang="ts"> import Label from '$lib/components/ui/label.svelte'; import Textarea from '$lib/components/ui/textarea.svelte'; const uid = $props.id(); </script> <div class="space-y-2"> <Label for={uid}>Read-only textarea</Label> <Textarea id={uid} class="read-only:bg-muted" value="This is a read-only textarea" readonly placeholder="Leave a comment" /> </div> ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/textareas/textarea-18.svelte) ## textarea-19 > A type-safe, accessible textarea-19 component for building modern UIs. This component is part of the textareas collection. ### Core Information - **Component ID**: `textarea-19` - **Location**: `/src/lib/components/textareas/textarea-19.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte <script lang="ts"> import Label from '$lib/components/ui/label.svelte'; import Textarea from '$lib/components/ui/textarea.svelte'; const uid = $props.id(); </script> <div class="space-y-2"> <Label for={uid}>Autogrowing textarea</Label> <Textarea id={uid} placeholder="Leave a comment" class="max-h-29.5 min-h-[none] resize-none py-1.5 [field-sizing:content]" /> </div> ``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/textareas/textarea-19.svelte)