Dashboard UI Kit

Apps PreviewDownload Design Package

TextArea

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

Basic Usage

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

Prop table

className

false

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

false

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

false

type: boolean
Renders without borders.
errorMessage

false

type: React.ReactNode
Displays error message and renders input in error state.
successMessage

false

type: React.ReactNode
Displays success message and renders input in success state.
noWrap

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

false

type: any
Other properties are passed down to the wrapping textarea element