TextAreaInput

Used to enter multiple lines of text.

Demo

React

OrientationHorizontalVertical

SizeSmallMediumLarge

Clearable

Required

Invalid

Read only

Disabled

Bio

Please enter your bio

Vue

OrientationHorizontalVertical

SizeSmallMediumLarge

Clearable

Required

Invalid

Read only

Disabled

Bio

Please enter your bio

Example

React

// Import component
import { TextAreaInput } from '@fintech-sandpit/ui/react';
// Import styles (optional). Please note that TextAreaInput is using Field component.
import '@fintech-sandpit/ui/style/components/field.css';

return (
  <TextAreaInput
    label="Bio"
    hint="Please enter your bio"
    placeholder="Enter your bio here..."
    error="Invalid bio"
    autoresize
  />
);

Vue

<script setup lang="ts">
// Import component
import { TextAreaInput } from '@fintech-sandpit/ui/vue';
// Import styles (optional). Please note that TextAreaInput is using Field component.
import '@fintech-sandpit/ui/style/components/field.css';
</script>

<template>
  <TextAreaInput
    label="Bio"
    hint="Please enter your bio"
    placeholder="Enter your bio here..."
    error="Invalid bio"
    autoresize
  />
</template>

Props

React

Name	Type	Required	Default	Description
value	string		—	Controlled value of the text area
defaultValue	string		—	Default (uncontrolled) value of the text area
name	string		—	Name of the input element
orientation	Orientation		vertical	Orientation of the text area
size	FieldSize		md	Size of the text area
label	string		—	Label of the text area
hint	string		—	Helper text of the text area
error	string		—	Error text of the text area
clearable	boolean		false	Whether the text area is clearable
required	boolean		false	Whether the text area is required
invalid	boolean		false	Whether the text area is invalid
readOnly	boolean		false	Whether the text area is read only
disabled	boolean		false	Whether the text area is disabled
placeholder	string		—	Placeholder of the text area
autoresize	boolean		false	Whether the text area should autoresize
rows	number		—	Number of rows of the text area

Vue

Name	Type	Required	Default	Description
model-value	string		—	Controlled value of the text area 1
default-value	string		—	Default (uncontrolled) value of the text area
name	string		—	Name of the input element
orientation	Orientation		vertical	Orientation of the text area
size	FieldSize		md	Size of the text area
label	string		—	Label of the text area
hint	string		—	Helper text of the text area
error	string		—	Error text of the text area
clearable	boolean		false	Whether the text area is clearable
required	boolean		false	Whether the text area is required
invalid	boolean		false	Whether the text area is invalid
read-only	boolean		false	Whether the text area is read only
disabled	boolean		false	Whether the text area is disabled
placeholder	string		—	Placeholder of the text area
autoresize	boolean		false	Whether the text area should autoresize
rows	number		—	Number of rows of the text area

1. Can be used with the v-model directive for two-way binding.

Events

React

Name	Type	Description
onValueChange	(value: string) => void	Event handler for when the value changes
onValueClear	() => void	Event handler for when the value is cleared

Vue

Name	Type	Description
update:model-value	(value: string) => void	Event handler for when the value changes
clear	void	Event handler for when the value is cleared

Types

type FieldSize = 'sm' | 'md' | 'lg'

type Orientation = 'horizontal' | 'vertical'