FinallyReact Design Library

Text Input

Write the truth

The Text Input component can be used by importing { TextInput } from "finallyreact"

Input values are emitted through onBlur and onChange events (or the generic onEvent prop, which combines both). Values input and output will always be strings.

Example

Event:

Value:

Outline

Event:

Value:

Rounded

Event:

Value:

Clear Icon

Event:

Value:

Event:

Value:

Placeholder - Floating

Float

Event:

Value:

Float

Event:

Value:

Placeholder - Not Floating

No Float

Event:

Value:

No Float

Event:

Value:

Color

Use any FinallyReact color or valid hex value

Event:

Value:

Event:

Value:

Event:

Value:

Size

small

Event:

Value:

medium

Event:

Value:

large

Event:

Value:

small

Event:

Value:

medium

Event:

Value:

large

Event:

Value:

Mask

Use '1' to indicate user input

Mask: 11/11/1111

Event:

Value:

Mask: (111) 111-1111

Event:

Value:

Mask: $111,111.11

Event:

Value:

Mask: $$111-111##

Event:

Value:

Password

Use type = 'password'

Password

Event:

Value:

Disabled

Placeholder

Simple

Event:

Value:

Left and Right Icons

Placeholder

Left and Right Labels

Left Label

Placeholder

Right Label

Textarea

Custom Clear Icon

TextInput Props

Prop Name	Prop Type	Description
clearProps	HTMLAttributes	Props for clear icon
color	string	anyFinallyReactColor
customClear	React.ReactNode	Custom clear component
disabled	boolean	Disable input
dropdownArrowProps	HTMLAttributes	Props for dropdown arrow
dropdownProps	HTMLAttributes	Props for dropdown icon container
floatingPlaceholder	boolean	Float placeholder when input is not empty
initialValue	string	Initial value for input
inputProps	HTMLAttributes	Props for inner input
labelProps	HTMLAttributes	Props for left and right labels
leftIcon	any	Icon to show on left side of input
leftLabel	string	Label to show on left side of input
leftLabelProps	HTMLAttributes	Props for left label
mask	string	Mask with 1 representing a number input. Example: 111-111-1111
name	string	Name for input
onClear	() => void	Callback for clear icon
outline	boolean	Outline input
passwordIcon	any	Icon to display when input is a password
passwordIconProps	HTMLAttributes	Props for password icon
placeholder	string	Placeholder for input
readOnly	boolean	Make input read only
rightIcon	any	Icon to show on right side of input
rightLabel	string	Label to show on right side of input
rightLabelProps	HTMLAttributes	Props for right label
rounded	boolean	Round input
showClear	boolean	Show clear icon
showDropdown	boolean	Show dropdown icon
simple	boolean	Simple input with no styles
size	'sm' \| 'md' \| 'lg'	Size of input
type	'text' \| 'password' \| 'textarea'	Type of formatting
value	string	Value for input

Text Input

Write the truth

The Text Input component can be used by importing { TextInput } from "finallyreact"

Input values are emitted through onBlur and onChange events (or the generic onEvent prop, which combines both). Values input and output will always be strings.

Example

Event:

Value:

Outline

Event:

Value:

Rounded

Event:

Value:

Clear Icon

Event:

Value:

Event:

Value:

Placeholder - Floating

Float

Event:

Value:

Float

Event:

Value:

Placeholder - Not Floating

No Float

Event:

Value:

No Float

Event:

Value:

Color

Use any FinallyReact color or valid hex value

Event:

Value:

Event:

Value:

Event:

Value:

Size

small

Event:

Value:

medium

Event:

Value:

large

Event:

Value:

small

Event:

Value:

medium

Event:

Value:

large

Event:

Value:

Mask

Use '1' to indicate user input

Mask: 11/11/1111

Event:

Value:

Mask: (111) 111-1111

Event:

Value:

Mask: $111,111.11

Event:

Value:

Mask: $$111-111##

Event:

Value:

Password

Use type = 'password'

Password

Event:

Value:

Disabled

Placeholder

Simple

Event:

Value:

Left and Right Icons

Placeholder

Left and Right Labels

Left Label

Placeholder

Right Label

Textarea

Custom Clear Icon

TextInput Props

Prop Name	Prop Type	Description
clearProps	HTMLAttributes	Props for clear icon
color	string	anyFinallyReactColor
customClear	React.ReactNode	Custom clear component
disabled	boolean	Disable input
dropdownArrowProps	HTMLAttributes	Props for dropdown arrow
dropdownProps	HTMLAttributes	Props for dropdown icon container
floatingPlaceholder	boolean	Float placeholder when input is not empty
initialValue	string	Initial value for input
inputProps	HTMLAttributes	Props for inner input
labelProps	HTMLAttributes	Props for left and right labels
leftIcon	any	Icon to show on left side of input
leftLabel	string	Label to show on left side of input
leftLabelProps	HTMLAttributes	Props for left label
mask	string	Mask with 1 representing a number input. Example: 111-111-1111
name	string	Name for input
onClear	() => void	Callback for clear icon
outline	boolean	Outline input
passwordIcon	any	Icon to display when input is a password
passwordIconProps	HTMLAttributes	Props for password icon
placeholder	string	Placeholder for input
readOnly	boolean	Make input read only
rightIcon	any	Icon to show on right side of input
rightLabel	string	Label to show on right side of input
rightLabelProps	HTMLAttributes	Props for right label
rounded	boolean	Round input
showClear	boolean	Show clear icon
showDropdown	boolean	Show dropdown icon
simple	boolean	Simple input with no styles
size	'sm' \| 'md' \| 'lg'	Size of input
type	'text' \| 'password' \| 'textarea'	Type of formatting
value	string	Value for input