Textarea

Textarea is the multi-line version of Input.

import { Textarea } from '@beyul/sulmu-ui'

Source · Figma

Examples

States

Quisque sodales vestibulum sodales nisi.Too shortDisabled

import { Stack, Textarea } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Stack style={{ maxWidth: 320 }}>
      <Textarea placeholder="Description" aria-label="Empty" />
      <Textarea defaultValue="Quisque sodales vestibulum sodales nisi." aria-label="Filled" />
      <Textarea invalid defaultValue="Too short" aria-label="Invalid" />
      <Textarea disabled defaultValue="Disabled" aria-label="Disabled" />
    </Stack>
  )
}

Autoresize

Notes

The field grows as you type.

import { Field, Textarea } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <div style={{ maxWidth: 320 }}>
      <Field label="Notes" helperText="The field grows as you type.">
        <Textarea autoresize placeholder="Add a note for the team" />
      </Field>
    </div>
  )
}

Props

Prop	Type	Default	Description
invalid	boolean	-	Marks the value as wrong. Inside a Field this is set for you.
autoresize	boolean	-	Grow with the content instead of scrolling.

Textarea also accepts every native textarea attribute (rows, value, onChange and so on).

Accessibility and usage

• Wrap it in a Field for a label; on its own it needs an aria-label.
• Inside a Field, it takes its id, invalid, disabled and required from the Field.