@isoftdata/svelte-textarea

Svelte Textarea

Install

npm i @isoftdata/svelte-textarea

Props

Name	Type	Description	Default
class	string	The class name(s) to add to the textarea.	undefined
hint	string | null	Hint text to be displayed as part of the label	null
hintClass	string	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	string	The class name(s) to add to the label element.	undefined
labelParentClass	string	The class name(s) to add to the label's parent.	undefined
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
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)

Slots

• append - Any content you want to append to the input.
• prepend - Any content you want to prepend to the input.

Events

The following events are forwarded:

• blur
• change
• click
• focus
• hintClick (from Label component)
• input
• keyup

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}
				on:change={changeHandler}
			/>
			{value2}
		</div>
	</div>