Textarea

A labelled multi-line text field with an optional character counter.

Release note

Shown to players in the game lobby.

0 of 140

Internal commentoptional

textarea.example.svelte

<script lang="ts">
  import { Textarea } from '@onlywin/ui-svelte';
</script>

<div class="example-grid">
  <Textarea
    label="Release note"
    maxLength={140}
    hint="Shown to players in the game lobby."
  />
  <Textarea label="Internal comment" optional rows={3} />
</div>

Usage

Do

Give a maximum when the text has one, so the counter shows it.

Don’t

Do not use it for one-line values.

Accessibility

Labelled and described like Input.
With maxLength, a counter shows the length in the current language.

Keyboard

Textarea keyboard interactions
Keys	Action
`Tab, Shift+Tab`	Move focus in and out

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

Textarea props
Prop	Type	Default	Description
`disabled`	`boolean`	`false`
`error`	`string`	—
`hint`	`string`	—
`id`	`string`	—
`label` *required	`string`	—
`maxLength`	`number`	—
`name`	`string`	—
`onValueChange`	`(value: string) => void`	—
`optional`	`boolean`	`false`
`placeholder`	`string`	—
`required`	`boolean`	`false`
`rows`	`number`	`4`
`value`	`string`	`''`	Bindable in Svelte; `defaultValue` in React.