Dashboard UI Kit

Apps Preview Download Design Package

Table of contents

TextArea

import { TextArea } from '@duik/it'
import TextArea from '@duik/text-area'

Basic Usage

Default text	<TextArea defaultValue="Default text" /> <div class="form-group"> <textarea class="form-control">Default text</textarea> </div> ReactHTML Snippet
Label	<TextArea label="Label" placeholder="Write Something" /> <div class="form-group"> <label>Label</label> <textarea class="form-control" placeholder="Write Something"></textarea> </div> ReactHTML Snippet
LabelPassing other attrs to textarea	<TextArea defaultValue="Passing other attrs to textarea" label="Label" rows={10} /> <div class="form-group"> <label>Label</label> <textarea class="form-control" rows="10">Passing other attrs to textarea</textarea> </div> ReactHTML Snippet
Label There is a problem	<TextArea errorMessage="There is a problem" label="Label" placeholder="Write Something" /> <div class="form-group"> <label>Label</label> <textarea class="form-control is-invalid" placeholder="Write Something"></textarea> <div class="invalid-feedback">There is a problem</div> </div> ReactHTML Snippet
Label It's ok!	<TextArea label="Label" placeholder="Write Something" successMessage="It's ok!" /> <div class="form-group"> <label>Label</label> <textarea class="form-control is-valid" placeholder="Write Something"></textarea> <div class="valid-feedback">It's ok!</div> </div> ReactHTML Snippet
Read Only	<TextArea label="Read Only" placeholder="Write Something" readOnly /> <div class="form-group"> <label>Read Only</label> <textarea class="form-control" readonly="" placeholder="Write Something"></textarea> </div> ReactHTML Snippet
DisabledDisabled content	<TextArea defaultValue="Disabled content" disabled label="Disabled" /> <div class="form-group"> <label>Disabled</label> <textarea class="form-control" disabled="">Disabled content</textarea> </div> ReactHTML Snippet
	<TextArea clear placeholder="Clear with no border or background" /> <div class="form-group"> <textarea class="form-control clear" placeholder="Clear with no border or background"></textarea> </div> ReactHTML Snippet

Prop table

className	Required: false
type: string
className, e.g. "my-custom-styling"

label	Required: false
type: string
Label text. Ideally you should pass "id" as well, TextField will automatically connect the label with "for"

clear	Required: false
type: boolean
Renders without borders.

errorMessage	Required: false
type: React.ReactNode
Displays error message and renders input in error state.

successMessage	Required: false
type: React.ReactNode
Displays success message and renders input in success state.

noWrap	Required: false
type: boolean
When multiple elements are rendered, e.g. providing a label, the component will wrap the content with a FormGroup component for mroe consistent UI. pass noWrap={false} to disable the default behaviour.

...rest	Required: false
type: any
Other properties are passed down to the wrapping textarea element