TextAreaInput

Used to enter multiple lines of text.

Demo

React

OrientationHorizontalVertical

SizeExtra SmallSmallMediumLargeExtra Large

Required

Invalid

Read only

Disabled

BioPlease enter your bio

Vue

OrientationHorizontalVertical

SizeExtra SmallSmallMediumLargeExtra Large

Required

Invalid

Read only

Disabled

BioPlease enter your bio

Usage

React

import { TextAreaInput } from '@fintech-sandpit/ui/react';

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

Vue

<script setup lang="ts">
import { TextAreaInput } from '@fintech-sandpit/ui/vue';
</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	Size		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
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	Size		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
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
onChange	(value: string) => void	Event handler for when the value changes

Vue

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

Types

type Orientation = 'horizontal' | 'vertical';
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';