TextArea

The TextArea component provides a multi-line text input field, allowing users to input larger volumes of text. It supports various customizable features, such as different sizes, loading states, error states, and more, enabling it to adapt to different usage scenarios within your application.

TextArea

This is helper text

Variant

Size

Required

ReadOnly

Disabled

Error

Overrides helper text

Clearable

Label

Placeholder

Helper Text

import React from "react"
import { TextArea } from "@creation-ui/react"

export const Example = () => (
  <TextArea
    variant={"outlined"}
    size={"md"}
    error={""}
    clearable
    label={"TextArea"}
    placeholder={"Placeholder"}
    helperText={"This is helper text"}
  />
)

It's important to note that the TextArea component's width won't adjust dynamically like Input because it has resize class and can be manually resized by dragging the bottom-right corner. If you prefer a fixed width or different resize behaviour (opens in a new tab), you can set this by providing custom width constraints, either through a wrapper component or by passing a class to the className prop. For example:

// example with tailwindcss custom width
<TextArea className='w-[200px]' />

Setting the resizeability to textarea

// resize?: 'none' | 'both' | 'horizontal' | 'vertical';
<TextArea resize={'both'} label='Resizeable textarea' placeholder='You can resize me in X and Y' />

Resizeable textarea

Resizeable textarea Y

Resizeable textarea X

Component API

The TextArea component has several props available for customization, outlined in the props table below. In addition, it accepts all native props that are applicable to the HTML TextArea element:

[object Object]

Prop	Default	Description
`size`	`md`	`sm \| md \| lg` Size of the element
`variant`	`outlined`	`contained \| outlined \| text` Variant of the element
`required`	—	`boolean` Is element required?
`readOnly`	—	`boolean` Is element read-only?
`label`	—	`string` Input label
`disabled`	—	`boolean` Is disabled?
`loading`	—	`boolean` Show loading state
`startAdornment`	—	`React.ReactNode` Icon on the left side of the component
`endAdornment`	—	`React.ReactNode` Icon on the right side of the component
`helperText`	—	`boolean` Additional information for display with component
`error`	—	`boolean` Text to be displayed when input is invalid
`cx`	—	`{ input?: 'string', label?: 'string', container?: { inner?: 'string', outer?: 'string', } }` Class names manipulation API. Each property ("input", "label", etc.) is assigned to different Input component

Switch Time Picker