Textarea
A textarea allows user to create multi-line text inputs.
Usage
Import the Textarea
component from “figBlocks”.
<Textarea placeholder="some value here" />
Textarea with label
Import Textarea
and Label
component from “figBlocks”.
<div> <Label for="txt1">Enter the text here</Label> <Textarea id="txt1" placeholder="some value here" /> </div>
Disabled state
The textarea can be disabled by passing the disabled
prop.
<Textarea disabled value="A quick brow fox jumps over a lazy dog" />
Custom rows
The number of rows can be customized using the rows
prop. The rows value should be greater than 2.
<Textarea rows="6" value="A quick brow fox jumps over a lazy dog" />
Resize
Textarea can be made resizable by the resize
prop.
<Textarea resize value="A quick brow fox jumps over a lazy dog" />
Props
id | string | undefined | Id of the textarea. |
rows | number | 2 | Custom row count, the value should be greater than 2. |
name | string | undefined | The name of the input element, used when submitting a form. |
value | string | undefined | The value of the textarea. |
resize | boolean | false | If true, the textarea will be resizable. |
disabled | boolean | false | If true, the textarea will be disabled. |
placeholder | string | undefined | Placeholder text. |
class | string | undefined | Custom CSS classname for styling. |
Events
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:change
on:input
on:keydown
on:keyup
on:focus
on:blur
on:paste