component

Textarea

The Textarea component provides a multi-line text input field, allowing users to enter larger blocks of text.

Source code in GitHub Textarea in Storybook

Set Up #

To start using the Textarea component, import it with the following code:

Example.svelte
<script>
	import { Textarea } from '@sans-ui/core';
</script>

Usage #

Here’s a basic example of the Textarea component in use:

Example.svelte
<script>
	import { Textarea } from '@sans-ui/core';
</script>

<label class="field">
	This is label
	<Textarea placeholder="Please type something here" />
</label>

Variant #

Customize the color theme of the Textarea with the variant prop. Available options include:

Example.svelte
<script>
	import { Textarea } from '@sans-ui/core';
</script>

<label class="field">
	This is label
	<Textarea variant="primary" placeholder="Please type something here" />
</label>
<label class="field">
	This is label
	<Textarea variant="secondary" placeholder="Please type something here" />
</label>
<label class="field">
	This is label
	<Textarea variant="success" placeholder="Please type something here" />
</label>
<label class="field">
	This is label
	<Textarea variant="warning" placeholder="Please type something here" />
</label>
<label class="field">
	This is label
	<Textarea variant="danger" placeholder="Please type something here" />
</label>

Value #

Set the initial text value of the Textarea using the value prop:

Example.svelte
<script>
	import { Textarea } from '@sans-ui/core';
</script>

<label class="field">
	This is label
	<Textarea value="hello world" placeholder="Please type something here" />
</label>

Size #

Adjust the text area size with the size prop to fit your design needs:k

Example.svelte
<script>
	import { Textarea } from '@sans-ui/core';
</script>

<label class="field">
	This is label
	<Textarea size="sm" placeholder="Please type something here" />
</label>
<label class="field">
	This is label
	<Textarea size="md" placeholder="Please type something here" />
</label>
<label class="field">
	This is label
	<Textarea size="lg" placeholder="Please type something here" />
</label>

Rounded #

Control the roundness of the Textarea corners with the rounded prop:

Example.svelte
<script>
	import { Textarea } from '@sans-ui/core';
</script>

<label class="field">
	This is label
	<Textarea rounded="none" placeholder="Please type something here" />
</label>
<label class="field">
	This is label
	<Textarea rounded="sm" placeholder="Please type something here" />
</label>
<label class="field">
	This is label
	<Textarea rounded="md" placeholder="Please type something here" />
</label>
<label class="field">
	This is label
	<Textarea rounded="lg" placeholder="Please type something here" />
</label>
<label class="field">
	This is label
	<Textarea rounded="full" placeholder="Please type something here" />
</label>

Disabled #

Make the Textarea non-interactive using the disabled prop:

Example.svelte
<script>
	import { Textarea } from '@sans-ui/core';
</script>

<label class="field">
	This is label
	<Textarea disabled={true} placeholder="Please type something here" />
</label>

ReadOnly #

Set the Textarea to read-only mode with the readonly prop:

Example.svelte
<script>
	import { Textarea } from '@sans-ui/core';
</script>

<label class="field">
	This is label
	<Textarea readonly={true} placeholder="Please type something here" />
</label>

Animation #

Control whether the Textarea has animation with the animation prop:

Example.svelte
<script>
	import { Textarea } from '@sans-ui/core';
</script>

<label class="field">
	This is label
	<Textarea animation={false} placeholder="Please type something here" />
</label>

Max Count #

Limit the number of characters that can be entered using the maxCount prop:

Example.svelte
<script>
	import { Textarea } from '@sans-ui/core';
</script>

<label class="field">
	This is label
	<Textarea value="hello world" maxCount={25} placeholder="Please type something here" />
</label>

Invalid #

Indicate an invalid state with the invalid prop and provide an error message using invalidText:

Example.svelte
<script>
	import { Textarea } from '@sans-ui/core';
</script>

<label class="field">
	This is label
	<Textarea
		invalid={true}
		invalidText="This is invalid text."
		placeholder="Please type something here"
	/>
</label>

Accessibility #

  • Built with a native HTML input element.
  • Visual and ARIA labeling support.
  • Change, clipboard, composition, selection, and input event support.
  • Required and invalid states exposed to assistive technology via ARIA.
  • Support for description and error message help text linked to the input via ARIA.

API #

Textarea provides APIs(Properties) that is necessary for you to configure a Textarea compponent.

Textarea Props #

Name Type Default Value
id string | undefined ""
value string | number | undefined undefined
variant 'primary' | 'secondary' | 'success' | 'warning' | 'danger' 'primary'
size 'sm' | 'md' | 'lg' md
rounded 'none' | 'sm' | 'md' | 'lg' | 'full none
label string ""
required boolean false
disabled boolean false
readonly boolean false
animation boolean true
placeholder string ""
maxCount number undefined
invalid boolean false
invalidText string ""
row number 4

Textarea Handlers #

Name Type Description
on:input (event: Event) => void Callback to invoke when user types in the textarea. It's used to update the value.

Textarea Slots #

Name Description
base This slot is applied to textarea element.
labelWrapper This slot is applied to the div element(wrapper) for the label element.
label This slot is applied to the label element.
invalidText This slot is applied to the span element for invalid.
<Switch Tooltip>