Skip to content
Primer Design System

Primer Design System

Textarea

Textarea is used to set a value that is multiple lines of text.

On this page

  • Updated 10 Dec 2024

Playground

No preview available
contrast
label?
caption?
state
validation
text type

Props

NameTypeValuesDefault
contrastBooleantrue false false
label?Booleantrue false true
textText-Placeholder
caption?Booleantrue false false
stateVariantdefault focus disabled default
validationVariantnone error success none
text typeVariantValue Placeholder Placeholder

contrast

label?: true, caption?: false, text: Placeholder, contrast: false, state: default, validation: none, text type: Placeholder
false
text: Placeholder, caption?: false, contrast: true, label?: true, state: default, validation: none, text type: Placeholder
true

label?

label?: true, caption?: false, text: Placeholder, contrast: false, state: default, validation: none, text type: Placeholder
true
text: Placeholder, caption?: false, contrast: false, label?: false, state: default, validation: none, text type: Placeholder
false

text

label?: true, caption?: false, text: Placeholder, contrast: false, state: default, validation: none, text type: Placeholder
Placeholder

caption?

label?: true, caption?: false, text: Placeholder, contrast: false, state: default, validation: none, text type: Placeholder
false
text: Placeholder, caption?: true, contrast: false, label?: true, state: default, validation: none, text type: Placeholder
true

state

label?: true, caption?: false, text: Placeholder, contrast: false, state: default, validation: none, text type: Placeholder
default
label?: true, caption?: false, text: Placeholder, contrast: false, state: focus, validation: none, text type: Placeholder
focus
label?: true, caption?: false, contrast: false, text: Placeholder, state: disabled, validation: none, text type: Placeholder
disabled

validation

label?: true, caption?: false, text: Placeholder, contrast: false, state: default, validation: none, text type: Placeholder
none
label?: true, contrast: false, caption?: false, text: Placeholder, state: default, validation: error, text type: Placeholder
error
label?: true, caption?: false, text: Placeholder, contrast: false, state: default, validation: success, text type: Placeholder
success

text type

label?: true, caption?: false, text: Placeholder, contrast: false, state: default, validation: none, text type: Placeholder
Placeholder
label?: true, contrast: false, caption?: false, text: Placeholder, state: default, validation: none, text type: Value
Value