TextArea

Stable

Multi-line text input with configurable line count and disabled state.

Installation

npm install @xaui/native

Import

import { TextArea } from '@xaui/native/input'

Basic Usage

Minimal example showing the component with its default configuration.

import { TextArea } from '@xaui/native/input'

export function Example() {
  return <TextArea />
}

Basic TextArea

A simple multi-line text input.

import { TextArea } from '@xaui/native/input'

export function BasicExample() {
  return <TextArea label="Notes" placeholder="Write something..." />
}

Controlled TextArea

Manage the value with React state.

import { useState } from 'react'
import { TextArea } from '@xaui/native/input'

export function ControlledExample() {
  const [value, setValue] = useState('')

  return (
    <TextArea
      label="Description"
      value={value}
      onValueChange={setValue}
      numberOfLines={6}
    />
  )
}

Variants

All available visual styles.

import { TextArea } from '@xaui/native/input'
import { Column } from '@xaui/native/view'

export function VariantsExample() {
  return (
    <Column gap={8}>
      <TextArea variant="colored" label="Colored" />
      <TextArea variant="light" label="Light" />
      <TextArea variant="bordered" label="Bordered" />
      <TextArea variant="underlined" label="Underlined" />
    </Column>
  )
}

With Validation

Display an error message when content is invalid.

import { TextArea } from '@xaui/native/input'

export function ValidationExample() {
  return (
    <TextArea
      label="Bio"
      isInvalid
      errorMessage="Bio cannot be empty"
      description="Tell us about yourself"
    />
  )
}

Disabled and Read-Only

Non-editable states.

import { TextArea } from '@xaui/native/input'
import { Column } from '@xaui/native/view'

export function StatesExample() {
  return (
    <Column gap={10}>
      <TextArea label="Disabled" defaultValue="Cannot edit" isDisabled />
      <TextArea label="Read-only" value="Visible but locked" isReadOnly />
    </Column>
  )
}