Textarea

A simple text area element that can be used to collect user input.

The Textarea component can be configured in multiple ways, allowing the developer to customize the look and feel of the component, by specifying properties such as size and radius.

Source code

Theme

Storybook

Tone

Color

Size

Shadow

Radius

Disabled

With ring

Validation

Placeholder

import { Input } from '@almond-ui/core';

function App() {
  return (
    <Textarea />
  );
}

Import

Import the Textarea component using the following import statement.

import { Textarea } from '@almond-ui/core';

Tones

The Textarea component supports three tones: light, solid and transparent.

<View>
  <Textarea tone="light" placeholder="Light tone" />
  <Textarea tone="solid" placeholder="Solid tone" />
  <Textarea tone="transparent" placeholder="Transparent tone" />
</View>

Colors

The Textarea component supports the following colors: blue, purple, gray, dark and black.

The color property can be used to specify the color of the border and the ring on the focus state.

<View>
  <Textarea color="blue" placeholder="Blue color" />
  <Textarea color="purple" placeholder="Purple color" />
  <Textarea color="gray" placeholder="Gray color" />
  <Textarea color="dark" placeholder="Dark color" />
  <Textarea color="black" placeholder="Black color" />
</View>

Sizes

The Textarea component supports four size options: xs, sm, md and lg.

<View>
  <Textarea size="xs" placeholder="Extra small" />
  <Textarea size="sm" placeholder="Small" />
  <Textarea size="md" placeholder="Medium" />
  <Textarea size="lg" placeholder="Large" />
</View>

Radiuses

The Textarea component supports the following radius options: none, sm, base, md, lg and xl.

<View>
  <Textarea radius="none" placeholder="none" />
  <Textarea radius="sm" placeholder="sm" />
  <Textarea radius="base" placeholder="base" />
  <Textarea radius="md" placeholder="md" />
  <Textarea radius="lg" placeholder="lg" />
  <Textarea radius="xl" placeholder="xl" />
</View>

Shadows

The Textarea component supports the following shadow options: none, sm, base and md.

<View>
  <Textarea shadow="none" placeholder="none" />
  <Textarea shadow="sm" placeholder="sm" />
  <Textarea shadow="base" placeholder="base" />
  <Textarea shadow="md" placeholder="md" />
</View>

Validation

The Textarea component supports the following validation options: none, invalid, valid and warning.

<View>
  <Textarea validation="none" placeholder="none" />
  <Textarea validation="invalid" placeholder="invalid" />
  <Textarea validation="valid" placeholder="valid" />
  <Textarea validation="warning" placeholder="warning" />
</View>

States

Textarea component supports disabled state.

<View>
  <Textarea disabled placeholder="Disabled..." />
</View>

Ring

You can add a ring to the Textarea by setting the withRing prop to true.

<View>
  <Textarea withRing={true} placeholder="With ring..." />
  <Textarea withRing={false} placeholder="Without ring..." />
</View>

Ref

The Textarea component supports the ref prop, which allows for obtaining a reference to the associated underlying HTML element.

import { useRef } from 'react';
import { Textarea } from '@almond-ui/core';

function App() {
  const ref = useRef<HTMLTextAreaElement>(null);
  return <Textarea ref={ref} />;
}

API Reference

Properties

Prop	Type	Description	Default
color	`TextareaColor`	Sets the border and ring color on focus state	`dark`
disabled	`boolean`	Disables textarea	`false`
radius	`TextareaRadius`	Sets the border radius	`md`
shadow	`TextareaShadow`	Sets the shadow size	`none`
size	`TextareaSize`	Sets the textarea size	`md`
tone	`TextareaTone`	Sets the textarea tone	`light`
validation	`TextareaValidation`	Sets the validation state	`none`
withRing	`boolean`	Shows a ring around the textarea on active state	`true`

Types

type TextareaColor = 'blue' | 'purple' | 'gray' | 'dark' | 'black';

type TextareaRadius = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'full';

type TextareaShadow = 'none' | 'sm' | 'base' | 'md';

type TextareaSize = 'xs' | 'sm' | 'md' | 'lg';

type TextareaTone = 'light' | 'solid' | 'transparent';

type TextareaValidation = 'none' | 'invalid' | 'valid' | 'warning';

Switch