@isoftdata/svelte-textarea

Svelte Textarea

Install

pnpm i @isoftdata/svelte-textarea

Breaking changes

2.0.0

• Require Svelte 5
• Slots -> Snippets
• Events -> Callbacks

Props

Name	Type	Description	Default
class	string	The class name(s) to add to the textarea.	undefined
hint	string | Snippet | null	Hint text to be displayed as part of the label	null
hintClass	ClassValue	The class name(s) to add to the hint text.	undefined
hintClickable	boolean	Whether the hint is clickable or not.	false
id	string	The unique identifier .	uuid()
isLoading	boolean	Whether the component is in a loading state or not.	false
label	string | null	The label text for the component.	null
labelClass	ClassValue	The class name(s) to add to the label element.	undefined
labelParentClass	ClassValue	The class name(s) to add to the label's parent.	undefined
lazy	boolean | number	When using binding, true means the value will update onchange, false means oninput. A millisecond number value indicates the delay from the last UI interaction(debouncing)	false
required	boolean	Whether the field is required or not.	false
selectOnFocus	boolean	Whether to select the text on focus or not.	false
showLabel	boolean	Whether to show the label.	true
size	"" | "sm" | "lg"	The size of the textarea component.	""
textarea	HTMLTextAreaElement	The textarea element. Useful if you want to call focus() or another function.	N/A
textEllipsis	boolean	Whether to show ellipsis for overflowing label texr.	false
title	string	The title text for the component.	undefined
value	string	The value of the component.	None (Required)

Snippets

• append - Any content you want to append to the input.
• prepend - Any content you want to prepend to the input.
• hint - Passed to the label component

Events

All event callbacks/handlers are passed to the underlying textarea as normal

Example

	<div class="row">
		<div class="col-3">
			<TextArea
				label="Two Way"
				bind
			/>
			{value}
		</div>
		<div class="col-3">
			<TextArea
				label="One Way / on:change"
				value={value2}
				onchange={changeHandler}
			/>
			{value2}
		</div>
	</div>