Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
Components

Textarea

Textarea is used when you want to get larger amount of texts from the user.

FigmaGitHub

Examples

A simple Textarea

<Textarea label="Description" />

A controlled textarea

() => {
  const [description, setDescription] = React.useState("");
  return (
    <Textarea 
      label="Description" 
      value={description} 
      onChange={e => setDescription(e.target.value)} 
    />
  );
}

A bigger textarea

<Textarea label="What can we help you with?" minHeight="10rem" />

With error

<Textarea label="Description" invalid={true} errorText="Something is wrong" />

With helper text

<Textarea label="Description" helperText="Something helpful for the user" />

Different variants

<Stack gap={3}>
  <Textarea label="Base" />
  <Textarea label="Floating" variant="floating" />
</Stack>

Guidelines

Occasionally, we ask our users for slightly longer texts, such as feedback, additional information related to travels, and so on. In such cases, it may be useful to use a <Textarea />.

If you only want one line of text, use <Input />.

Code

<Textarea />

import { Textarea } from "@vygruppen/spor-react";

A textarea

Props

Name
Type
Required?
Description
labelstringA descriptive label
variant"core" | "floating"Defaults to core.
disabledboolean
invalidboolean
errorTextReact.ReactNodeDisplay error text for the component
readonlyboolean
requiredboolean
helperTextReact.ReactNodeDisplay helper text for the input