Textarea

Examples
Textarea
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Textarea id="id" label="Job Title" value="Senior Developer" />
Textarea with message
Theme: seekAnz
e.g. Senior Developer
Theme: seekBusiness
e.g. Senior Developer
Theme: jobsDbRebrand
e.g. Senior Developer
Theme: jobsDb
e.g. Senior Developer
Theme: jobStreet
e.g. Senior Developer
Theme: jobStreetClassic
e.g. Senior Developer
Theme: wireframe
e.g. Senior Developer
Code:
<Textarea id="id" label="Job Title" message="e.g. Senior Developer" value="" />
Textarea with secondary label
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Textarea id="id" label="Title" secondaryLabel="Optional" value="" />
Textarea with tertiary label
Theme: seekAnz
 Help?
Theme: seekBusiness
 Help?
Theme: jobsDbRebrand
 Help?
Theme: jobsDb
 Help?
Theme: jobStreet
 Help?
Theme: jobStreetClassic
 Help?
Theme: wireframe
 Help?
Code:
<Textarea
  id="id"
  label="Title"
  secondaryLabel="Optional"
  tertiaryLabel={<TextLink>Help?</TextLink>}
  value=""
/>
Textarea with error
Theme: seekAnz
Answer is incorrect
Theme: seekBusiness
Answer is incorrect
Theme: jobsDbRebrand
Answer is incorrect
Theme: jobsDb
Answer is incorrect
Theme: jobStreet
Answer is incorrect
Theme: jobStreetClassic
Answer is incorrect
Theme: wireframe
Answer is incorrect
Code:
<Textarea
  id="id"
  label="Do you like Braid?"
  message="Answer is incorrect"
  tone="critical"
  value="No"
/>
Textarea with positive message
Theme: seekAnz
Nice one!
Theme: seekBusiness
Nice one!
Theme: jobsDbRebrand
Nice one!
Theme: jobsDb
Nice one!
Theme: jobStreet
Nice one!
Theme: jobStreetClassic
Nice one!
Theme: wireframe
Nice one!
Code:
<Textarea
  id="id"
  label="Do you like Braid?"
  message="Nice one!"
  tone="positive"
  value="Yes"
/>
Textarea grow field with typing, limited to 6 lines
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Textarea id="id" label="Do you like Braid?" lineLimit={6} value="" />
Textarea nearing character limit, eg. 50 characters
Theme: seekAnz
 
8
Theme: seekBusiness
 
8
Theme: jobsDbRebrand
 
8
Theme: jobsDb
 
8
Theme: jobStreet
 
8
Theme: jobStreetClassic
 
8
Theme: wireframe
 
8
Code:
<Textarea
  characterLimit={50}
  id="id"
  label="Do you like Braid?"
  value="The text is nearing the 50 character limit"
/>
Textarea exceeding character limit, eg. > 50 characters
Theme: seekAnz
 
-15
Theme: seekBusiness
 
-15
Theme: jobsDbRebrand
 
-15
Theme: jobsDb
 
-15
Theme: jobStreet
 
-15
Theme: jobStreetClassic
 
-15
Theme: wireframe
 
-15
Code:
<Textarea
  characterLimit={50}
  id="id"
  label="Do you like Braid?"
  value="The long piece of text exceeding the specified 50 character limit"
/>
Textarea highlighting a range
Theme: seekAnz
Characters 9-22 are invalid
Theme: seekBusiness
Characters 9-22 are invalid
Theme: jobsDbRebrand
Characters 9-22 are invalid
Theme: jobsDb
Characters 9-22 are invalid
Theme: jobStreet
Characters 9-22 are invalid
Theme: jobStreetClassic
Characters 9-22 are invalid
Theme: wireframe
Characters 9-22 are invalid
Code:
<Textarea
  description="Characters 9-22 are invalid"
  highlightRanges={[
    {
      end: 22,
      start: 9
    }
  ]}
  id="id"
  label="Do you like Braid?"
  value="The long piece of text highlighting a range"
/>

Required props

value
string | number | string[]
onChange
(event: FormEvent<HTMLTextAreaElement>) => void
id
string

Optional props

onBlur
(event: FocusEvent<HTMLTextAreaElement>) => void
onFocus
(event: FocusEvent<HTMLTextAreaElement>) => void
onPaste
(event: ClipboardEvent<HTMLTextAreaElement>) => void
placeholder
string
highlightRanges
{ start: number; end?: number | undefined; }[]
characterLimit
number
lines
number
lineLimit
number
grow
boolean
name
string
tone
"critical" | "positive" | "neutral"
autoComplete
string
disabled
boolean
label
ReactNode
secondaryLabel
ReactNode
tertiaryLabel
ReactNode
description
ReactNode
message
ReactNode
reserveMessageSpace
boolean
aria-describedby
string
data
Record<string, string | number>
autoFocus
boolean
required
boolean
ref
(instance: HTMLTextAreaElement | null) => void | RefObject<HTMLTextAreaElement>

Further References