Skip to content
Yuzur1ha Open

Component referenceDraft

Textarea

Textarea combines a multiline control with a label, hint and error. TextareaInput is the primitive for custom forms.

Updated

Design notes

Keep the label and description owned by one field composition. Native validation belongs to native controls.

Design sourceOpen in Figma

Textarea design

Inspect the original component, variants and visual details.

Playground

Playgrounddemo.tsx

A few words about yourself.

26 / 280

content/components/textarea/demo.tsx

import { useState } from "react"
import { Textarea } from "@yuzur1ha/ui"
import { DemoResult } from "../../examples/result"

export function TextareaDemo() {
  const [value, setValue] = useState("Building things with care.")
  return (
    <>
      <Textarea
        label="About you"
        hint="A few words about yourself."
        maxLength={280}
        value={value}
        onChange={(event) => setValue(event.target.value)}
      />
      <DemoResult>{value.length} / 280</DemoResult>
    </>
  )
}

API

Textarea

A labelled TextareaInput with linked hint/error text. Native textarea attributes, className and ref target the textarea.

TextareaProps
PropertyTypeRequiredDefaultDescription
labelstringYes—Visible label and accessible name.
hintstringNo—Supporting field guidance, associated with the control.
errorstringNo—Error message. Replaces hint text and marks the field invalid.
valuestring | number | readonly string[]No—Current native control value. Pair with onChange for controlled input.
defaultValuestring | number | readonly string[]No—Initial value used when the native control is uncontrolled.
onChangeChangeEventHandler<HTMLTextAreaElement, HTMLTextAreaElement>No—Native input change handler. Read value or checked from event.currentTarget.
rowsnumberNo—Native visible text-row count.
colsnumberNo—Native approximate character width.
maxLengthnumberNo—Maximum input length enforced by the browser.
disabledbooleanNo—Disables the native control.
requiredbooleanNo—Requires a non-empty native control value during form validation.
readOnlybooleanNo—Keeps the current value readable and focusable while preventing editing.
namestringNo—Native form submission field name.
placeholderstringNo—Text shown when the control has no value.
aria-invalidboolean | "true" | "false" | "grammar" | "spelling"No—Marks the native control invalid for assistive technology.
aria-describedbystringNo—IDs of additional descriptive elements; field components merge these with their hint or error ID.
classNamestringNo""Additional classes applied to the component’s documented root or control.
idstringNo—Native control ID. Generated when omitted; the visible label and supporting text use this association.
refRef<HTMLTextAreaElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.

TextareaInput

An unlabelled native textarea for custom field composition. Provide a visible label or accessible name.

TextareaInputProps
PropertyTypeRequiredDefaultDescription
valuestring | number | readonly string[]No—Current native control value. Pair with onChange for controlled input.
defaultValuestring | number | readonly string[]No—Initial value used when the native control is uncontrolled.
onChangeChangeEventHandler<HTMLTextAreaElement, HTMLTextAreaElement>No—Native input change handler. Read value or checked from event.currentTarget.
rowsnumberNo—Native visible text-row count.
colsnumberNo—Native approximate character width.
maxLengthnumberNo—Maximum input length enforced by the browser.
disabledbooleanNo—Disables the native control.
requiredbooleanNo—Requires a non-empty native control value during form validation.
readOnlybooleanNo—Keeps the current value readable and focusable while preventing editing.
namestringNo—Native form submission field name.
placeholderstringNo—Text shown when the control has no value.
aria-labelstringNo—Accessible name when a visible label does not already name the element.
aria-invalidboolean | "true" | "false" | "grammar" | "spelling"No—Marks the native control invalid for assistive technology.
aria-describedbystringNo—IDs of additional descriptive elements; field components merge these with their hint or error ID.
classNamestringNo""Additional classes applied to the component’s documented root or control.
idstringNo—DOM identifier for the rendered element.
refRef<HTMLTextAreaElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.