Text area

A TextArea grows as it is typed into, between minRows and maxRows, and scrolls after that. With maxLength, it shows how many characters are left. The count is a description rather than a live region: a screen reader reads it on reaching the field, and announces it unprompted only twice, entering the last ten characters and running out.

Notes

160 of 160 characters left

Anything the courier should know.

TextAreaDemo.tsx

import { View } from '@hozo/core'
import { Field, TextArea } from '@hozo/ui'
import { useState } from 'react'

export function TextAreaDemo() {
  const [notes, setNotes] = useState('')
  return (
    <View className="w-full max-w-md">
      <Field label="Notes" description="Anything the courier should know.">
        {(control) => (
          <TextArea
            {...control}
            value={notes}
            onChangeText={setNotes}
            minRows={2}
            maxRows={6}
            maxLength={160}
            placeholder="Leave it with a neighbour…"
          />
        )}
      </Field>
    </View>
  )
}

• value and onChangeText, or defaultValue.
• minRows and maxRows: line counts rather than pixels, so they survive a change of text size.
• maxLength: the limit and the counter.
• Inside a Field, {...control} passes the label, the description and the error, as it does for Input.