Ui.Textarea

A basic component for getting multiline user input in a text field. Keyboard and mouse can be used for providing or changing data.

Interactive Demo

You can play around with a Ui.Textarea below using the controls.

Size (16px)
Placeholder
Value
Disabled
Invalid
<Ui.Textarea
placeholder="Placeholder..."
size={Ui.Size.Px(16)}
disabled={false}
value="Hello!"/>
Value

The value can be controlled with the value property.

<Ui.Textarea value="john@doe.com"/>
Behavior

The textrea supports multiple behaviors using the behavior property.

Grow
<>
<Ui.Textarea behavior="resize-horizontal" value="Resize Horizontal"/>
<Ui.Textarea behavior="resize-vertical" value="Resize Vertical"/>
<Ui.Textarea behavior="resize-both" value="Resize Both"/>
<Ui.Textarea behavior="static" value="Static"/>
<Ui.Textarea behavior="grow" value="Grow"/>
</>
Placeholder

The placeholder can be changed with the placeholder property.

<Ui.Textarea placeholder="Enter email address..."/>
Size

The size of the component can be set with the size property.

<>
<Ui.Textarea size={Ui.Size.Px(12)} value="Size: 14px"/>
<Ui.Textarea size={Ui.Size.Px(16)} value="Size: 16px"/>
<Ui.Textarea size={Ui.Size.Px(20)} value="Size: 24px"/>
</>
Input Delay

In some situations it is required to delay the change event so it only fires when the value is settled.

The delay duration can be controlled with the inputDelay property.

If an input delay is specified the component is semi-controlled, meaning that during the typing its value can change but it will revert back to the given value once the typing is settled.
<>
<Ui.Textarea
placeholder="200ms delay..."
inputDelay={200}
onChange={(value : String) { Ui.Notifications.notifyDefault(<>value</>) }}
/>
<Ui.Textarea
placeholder="1000ms delay..."
inputDelay={1000}
onChange={(value : String) { Ui.Notifications.notifyDefault(<>value</>) }}
/>
</>
Disabled

The component can be disabled using the disabled property.

<>
<Ui.Textarea value="John Doe" disabled={true}/>
<Ui.Textarea value="John Doe" disabled={false}/>
</>
Invalid

The component can be marked invalid using the invalid property.

<Ui.Textarea value="John Doe" invalid={true}/>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.