TextInput

Used to get user input in a text field.

Demo

React

OrientationHorizontalVertical

SizeSmallMediumLarge

Clearable

Required

Invalid

Read only

Disabled

Name

Please enter your name

Vue

OrientationHorizontalVertical

SizeSmallMediumLarge

Clearable

Required

Invalid

Read only

Disabled

Name

Please enter your name

Example

React

// Import component
import { TextInput } from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/field.css';

return (
  <TextInput
    label="Name"
    placeholder="John Doe"
    hint="Please enter your name"
    error="Invalid name"
  />
);

Vue

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

<template>
  <TextInput
    label="Name"
    placeholder="John Doe"
    hint="Please enter your name"
    error="Invalid name"
  />
</template>

Props

React

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

Vue

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

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	Arguments	Description
update:model-value	value: string	Event handler for when the value changes
clear	void	Event handler for when the value is cleared

Types

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