Textarea component · Kition Tessera

Playground

Props

placeholder

rows

invalid

autoSize

disabled

What is shown

import { Textarea } from '@kition/tessera-ui'

<Textarea placeholder="Notes for the reviewer" rows={3} />

Examples

Fixed and growing

textarea.tsx

import { useState } from 'react'
import { Textarea } from '@kition/tessera-ui'

export default function Demo() {
  const [note, setNote] = useState('Grows as you type, up to five lines.')
  return (
    <div className="demo-stack">
      <Textarea rows={3} placeholder="Describe the change for the agent…" />
      <Textarea aria-label="Note" autoSize={{ minRows: 2, maxRows: 5 }} value={note} onChange={(event) => setNote(event.target.value)} />
    </div>
  )
}

Props

Textarea

Multi-line text.

Prop	Type	Default	Description
`invalid`	`boolean`	—
`autoSize`	`boolean \| AutoSize`	—	Grows with its text (between `minRows` and `maxRows` lines, when given).

Also takes the attributes of its HTML element (`className`, `aria-*`, events…).

Used in

1 of Kition's 16 kits use this component.

Table