Skip to content
Home

Textarea

Info
Demos
Properties
Events

Import

import { Textarea } from '@dnb/eufemia'

Description

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

Relevant links

Browser autofill styling

When users insert values using autofill in their browser, the browser applies its own background and text colors. How ever, in contrast to the Input component, Eufemia does overwrite the :autofill background color because of its wired looking 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 a visual feedback of the number of characters entered and the maximum number of characters allowed. And it will not limit the user in their workflow.

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

Du har brukt 0 av 3 tegn.

Demos

Textarea with rows and colds

Code Editor
<Textarea
  label="Default"
  rows="2"
  cols="20"
  value="Textarea value
Newline"
  spellCheck={false}
  on_change={({ value }) => {
    console.log('on_change', value)
  }}
  on_focus={() => {
    console.log('on_focus')
  }}
  on_blur={() => {
    console.log('on_blur')
  }}
/>

Textarea with placeholder text

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

Vertically placed label

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

Stretched horizontally placed label

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

Autoresize with max rows

Code Editor
<Textarea
  label="Autogrow"
  rows={1}
  autoresize={true}
  autoresize_max_rows={4}
  placeholder="Placeholder"
  on_key_down={({ rows, event }) => {
    if (rows >= 4 && event.key === 'Enter') {
      event.preventDefault()
    }
  }}
/>

Character counter

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

Message to the user

18 av 40 tegn gjenstår.

Code Editor
<Textarea
  label="Count characters"
  label_direction="vertical"
  autoresize
  value="Textarea value
Newline"
  status="Message to the user"
  characterCounter={40}
/>

With FormStatus failure message

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

Sizes

Code Editor
<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

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

Textarea with a suffix

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