TextArea

Textarea allows the user to enter and edit multiline text.

Usage

<script>
	import { TextArea } from 'fluentui-svelte';
</script>

<TextArea placeholder="Type your message here..." />

Placeholder

The `placeholder` prop sets the placeholder text for the textarea, providing a hint to users about what to enter.

View Code

<TextArea placeholder="Type your message here..." />

Resize

The `resize` prop controls whether the textarea can be resized by the user. It can be set to `none`, `both`, `horizontal`, or `vertical`. This allows you to control the resizing behavior of the textarea.

View Code

<TextArea resize="none" placeholder="No resize" />
<TextArea resize="vertical" placeholder="Vertical resize" />
<TextArea resize="both" placeholder="Resize both" />

On Change

The `onChange` event is triggered whenever the content of the textarea changes. This can be used to react to user input in real-time, such as validating input or updating other parts of the UI.

View Code

<TextArea onChange={(e) => console.log(e)} placeholder="Type..." />

Component Props

Name	Type	Default	Description
`value` bindable	`string`	`''`	The current value of the textarea.
`ref` bindable	`HTMLElement`		The DOM reference of the textarea element.
`placeholder`	`string`		The placeholder text for the textarea.
`resize`	`'none'` \| `'both'` \| `'horizontal'` \| `'vertical'`	`'vertical'`	Configures the resize behavior of the textarea.
`onChange`	`(e: Event) => void`		Callback function for the change event.
`disabled`	`boolean`	`false`	Disables the user interaction.
`wrapperAttributes`	`HTMLAttributes`		The attributes to spread on the wrapper element.
`wrapperRef` bindable	`HTMLDivElement`		The DOM reference of the wrapper element.
`SvelteHTMLElements['textarea']`