Skip to content

Textarea

Default textarea

Show code
default.tsx
import { Textarea } from "@hrc/input";
export function TextareaDefault() {
return (
<>
<Textarea placeholder="Hello world" />
<Textarea label="With label" placeholder="Hello world" />
<Textarea label="Required" placeholder="Hello world" required />
</>
);
}

Colors

Use the color prop to change the color of the textarea.

Show code
colors.tsx
import { Textarea } from "@hrc/input";
const colors = [
"primary",
"secondary",
"error",
"info",
"warning",
"success",
] as const;
const toTitleCase = (str: string) => `${str[0].toUpperCase()}${str.slice(1)}`;
export function TextareaColors() {
return colors.map((color) => (
<Textarea
key={`textarea-${color}`}
color={color}
label={`${toTitleCase(color)}`}
placeholder="Hello world"
// the following classnames are only for demo purposes
className="textarea--focused"
labelClassName="label--focused"
/>
));
}

Autosize

Use the autosize prop to automatically adjust the height of the textarea to fit its content.

Show code
autosize.tsx
import { Textarea } from "@hrc/input";
export function TextareaAutosize() {
return <Textarea placeholder="Hello world" autosize />;
}

Disabled

Add the disabled prop to disable the textarea.

Show code
import { useState } from "react";
import { Textarea } from "@hrc/input";
import { ToggleDisabled } from "./ToggleDisabled";
export function TextareaDisabled() {
const [disabled, setDisabled] = useState(false);
return (
<>
<ToggleDisabled disabled={disabled} setter={setDisabled} />
<Textarea placeholder="Hello world" disabled={disabled} />
<Textarea
label="With label"
placeholder="Hello world"
disabled={disabled}
/>
</>
);
}

Full Width

Add the fullWidth prop to make the textarea full width.

Show code
full-width.tsx
import { Textarea } from "@hrc/input";
export function TextareaFullWidth() {
return <Textarea placeholder="Full Width" fullWidth />;
}

With Helper Text

Add the helperText prop to display helper text below the textarea.

Show code
helper-text.tsx
import { Textarea } from "@hrc/input";
export function TextareaWithHelperText() {
return <Textarea placeholder="Hello world" helperText="Helper text" />;
}

With Error

Use the error prop to indicate an error state.

Show code
error.tsx
import { Textarea } from "@hrc/input";
export function TextareaWithError() {
return (
<>
<Textarea
label="With error"
placeholder="Hello world"
helperText="Invalid entry"
required
error
/>
<Textarea
label="With error (disabled)"
placeholder="Hello world"
helperText="Helper text"
disabled
error
/>
</>
);
}

API

See documentation below for reference to all of the props, classes and CSS variables (custom properties) available for <Textarea />: