text-area.md

Textarea

Adapt UI provides one theme for text area component with three styles and eight interaction states. Use this component to receive information from the user.

Simple Usage

import { TextArea } from "@adaptui/react-native-tailwind"
export default function App() {
  return (
      <TextArea placeholder="Type Something...." />
  )
}

Table of Contents

• Themes
• Variant
• Size
• Icon
• Interactions
• Suffix
• Props

Themes

Adapt UI provides only one base theme for TextArea.

Usage

Usage

import { TextArea, Slot, Icon } from "@adaptui/react-native-tailwind"
export default function App() {
  return (
      <TextArea
        placeholder="Type Something..."
      />
  )
}

Variant

Adapt UI provides four different input field components styles: subtle, outline, and underline.

You can use these various styled input field components based on the necessity and style you wish to provide to your design.

Usage

Usage

import { TextArea } from "@adaptui/react-native-tailwind"

export default function App() {
  return (
    <>
      <TextArea variant="subtle" placeholder="Whats happening" />
      <TextArea placeholder="Tell us about yourself" />
      <TextArea variant="underline" placeholder="Type your message here" />
    </>
  )
}

Size

There are four different sizes for input in Adapt UI: sm, md, lg & xl

Based on the hierarchy, you can switch between different sizes.

Usage

Usage

import { TextArea } from "@adaptui/react-native-tailwind"

export default function App() {
  return (
    <>
      <TextArea size="sm" placeholder="Whats happening" />
      <TextArea placeholder="Whats in your mind?" />
      <TextArea size="lg" placeholder="Type your message here" />
      <TextArea size="xl" placeholder="Tell us about yourself" />
    </>
  )
}

Interactions

We tried to bring the most commonly used interactions for the text area component. Adapt UI provides eight-input interactions: default, hover, active, focus, disabled, loading, error, and filled. These can give a complete cycle of text area interactions.

Usage

Usage

import { TextArea } from "@adaptui/react-native-tailwind"

export default function App() {
  return (
    <>
      <TextArea placeholder="Type something..." loading={true} />
      <TextArea placeholder="Type Something" editable={true}  /> //disabled
      <TextArea placeholder="Type something..." invalid={true} />
    </>
  )
}

Suffix

The suffix is a slot at the beginning or suffix position of a component. Here in the Textarea, the suffix slot can be used to bring icons. Suffix itself doesn't have any unique property.

Here in the Textarea, we have an icon in the suffix slot. You can change the icon by passing an component to suffix prop. The Icon will get hidden when the loading prop is true.

Usage

Usage

import { TextArea } from "@adaptui/react-native-tailwind"

export default function App() {
  return (
    <>
      <TextArea placeholder="Type something..." 
       suffix={<Icon icon={<Slot />} />}
      />
    </>
  )
}

Props

TextArea implements TextInput from React Native accepting all TextInputProps

Name	Description	Type	Default
size	Size of TextArea	sm md lg xl	md
variant	How will the TextArea look?	outline subtle underline	subtle
suffix	If added, the TextArea will show an icon on the bottom right of the TextArea's text.	JSX.Element	null
editable	If true, TextArea is disabled	boolean	false
invalid	Set to true, when TextArea Value is invalid	boolean	false
loading	If true, TextArea renders a spinner in suffix slot	boolean	false
_suffixProps	Touchable props for the suffix element	PressableProps	{}