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..." />

Shape

Set shape to rounded (default) or square.

View Code

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

<TextArea shape="rounded" aria-label="rounded" placeholder="rounded" />
<TextArea shape="square" aria-label="square" placeholder="square" />

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..." />

Form Control Attributes

Attributes and events apply to the native form field; ref gives you access to it. For the container, use wrapperAttributes and wrapperRef.

Component Props

Name	Type	Default	Description
`shape`	`Exclude<Shapes, 'circular'>`	`'rounded'`	Shape of the input surface, including its border and focus indicator.
`value` bindable	`string`	`''`	The current value of the textarea.
`ref` bindable	`HTMLTextAreaElement` \| `null`		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.
`disabled`	`boolean`	`false`	Disables the user interaction.
`wrapperAttributes`	`HTMLAttributes`		The attributes to spread on the wrapper element.
`wrapperRef` bindable	`HTMLDivElement` \| `null`		The DOM reference of the wrapper element.
`SvelteHTMLElements['textarea']`

Components

TextArea

Usage

Shape

Placeholder

Resize

On Change

Form Control Attributes

Component Props