#Textarea

#Import

import { Textarea } from '@dnb/eufemia'

#Description

The Textarea component is a multi-line text input control with an unlimited number of characters.

#When to use Textarea vs Eufemia Forms

Classic form components like this one are presentational controls. They handle the styling, sizing, icons, and basic events, while you manage their value, validation, and error handling yourself.

For most data input and forms situations, use Eufemia Forms fields instead. They build on these same components, but add data handling, validation, and error messages through the surrounding Form.Handler. Browse the field components to find the one that matches your data.

Reach for a classic component when you need it standalone outside of a form context, or when you handle the value and validation yourself.

The Eufemia Forms equivalent of Textarea is Field.String with the multiline property.

#Relevant links

• Figma
• Source code
• Docs code

#Browser autofill styling

When users insert values using autofill in their browser, the browser applies its own background and text colors. However, in contrast to the Input component, Eufemia overwrites the :autofill background color to avoid a visually inconsistent gap around the writing area when autofill is used.

#Accessibility

Please avoid using the maxlength attribute whenever possible, as it is not accessible. Instead, use the characterCounter property.

This way, the user gets visual feedback on the number of characters entered and the maximum number of characters allowed, and it will not limit the user in their workflow.

You can still set the requirement for your desired maximum number of characters by setting the maxLength property in Eufemia Forms.

#Related components

Textarea is part of the Input category. Other components for similar needs:

• Autocomplete — to help people find and choose from matching suggestions as they type.
• Checkbox — when people can turn one or more options on or off.
• DatePicker — when people need to choose one date or a date range.
• Dropdown — when people need to choose one option from a list.
• Filter — to help people narrow down a list or data set.
• FormLabel — to name an input, control, or form-related field.

See all in Input →

#Demos

#Textarea with rows and colds

<Textarea
  label="Default"
  rows="2"
  cols="20"
  value="Textarea value
Newline"
  spellCheck={false}
  onChange={({ value }) => {
    console.log('onChange', value)
  }}
  onFocus={() => {
    console.log('onFocus')
  }}
  onBlur={() => {
    console.log('onBlur')
  }}
/>

#Textarea with placeholder text

<Textarea label="Placeholder" placeholder="Placeholder text" />

#Vertically placed label

<Textarea
  label="Vertical"
  rows="3"
  cols="33"
  value="Textarea value with more than 3 lines
Newline
Newline
Newline
Newline"
/>

#Stretched horizontally placed label

<Textarea
  label="Horizontal"
  stretch={true}
  rows="3"
  value="Nec litora inceptos vestibulum id interdum donec gravida."
/>

#Autoresize with max rows

<Textarea
  label="Autogrow"
  rows={1}
  autoResize={true}
  autoResizeMaxRows={4}
  placeholder="Placeholder"
  onKeyDown={({ rows, event }) => {
    if (rows >= 4 && event.key === 'Enter') {
      event.preventDefault()
    }
  }}
/>

#Character counter

Internally, the TextCounter fragment is used to display the character counter.

<Textarea
  label="Count characters"
  autoResize
  value="Textarea value
Newline"
  status="Message to the user"
  characterCounter={40}
/>

#With FormStatus failure message

<Textarea
  label="Error Message"
  cols="33"
  value="Nec litora inceptos vestibulum id interdum donec gravida."
  status="Message to the user"
/>

#Sizes

<Flex.Stack>
  <Textarea placeholder="Small size" size="small" rows={1} />
  <Textarea placeholder="Medium size" size="medium" rows={1} />
  <Textarea placeholder="Large size" size="large" rows={1} />
</Flex.Stack>

#Disabled textarea

<Textarea
  label="Disabled"
  disabled
  value="Nec litora inceptos vestibulum id interdum donec gravida."
/>

#Textarea with a suffix

<Textarea
  label="Textarea with suffix"
  value="Nec litora inceptos vestibulum id interdum donec gravida."
  suffix={<HelpButton title="Modal Title">Modal content</HelpButton>}
/>