Textarea

One or more line input that allows writing large texts.

Import Textarea

Tremor exports one component for Textarea.

import { Textarea } from '@tremor/react';

Usage example

The example below shows text input examples with a Card, Textarea and a Button component.

import { Button, Card, Textarea } from '@tremor/react';import React from 'react';
export function TextareaUsageExample() {  const [value, setValue] = React.useState('');
  return (    <Card className="mx-auto max-w-lg">      <form        onSubmit={(e) => {x          e.preventDefault();          alert(value);        }}      >        <div className="flex flex-col gap-2">          <label htmlFor="description" className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">            Description          </label>          <Textarea            onChange={(e) => setValue(e.target.value)}            id="description"            placeholder="Start typing here..."            rows={6}            value={value}          />        </div>        <div className="mt-6 flex justify-end">          <Button type="submit">            Submit          </Button>        </div>      </form>    </Card>  );}

API Reference: Textarea

client component

defaultValue: The default of Textarea when it is initially rendered. Use when you do not need to control its state.

value: The controlled state of Textarea. Must be used in conjunction with onChange.

onValueChange: Event handler called when the state of the input changes.

placeholder: Sets the placehoder text

error: If true, the text input is labeled as invalid.

errorMessage: Text to be displayed if the error prop is set to `true`.

disabled: If true, the text input will be disabled.

autoHeight: If true, the text input will adjust its height given the input.

Theming

Text Input

Element	Theme Token
Roundness borderRadiustremor-default	borderRadiustremor-default
Shadow boxShadowtremor-input	boxShadowtremor-input
Font size fontSizetremor-default	fontSizetremor-default
Border color colorstremor-border-DEFAULT	colorstremor-border-DEFAULT
Border color focus colorstremor-brand-subtle	colorstremor-brand-subtle
Ring color focus colorstremor-brand-muted	colorstremor-brand-muted
Background color colorstremor-background-DEFAULT	colorstremor-background-DEFAULT
Background color disabled colorstremor-background-subtle	colorstremor-background-subtle
Background color hover colorstremor-background-muted	colorstremor-background-muted
Text color placeholder colorstremor-content-DEFAULT	colorstremor-content-DEFAULT
Text color input colorstremor-content-emphasis	colorstremor-content-emphasis
Text color disabled colorstremor-content-muted	colorstremor-content-muted