Free Astro Components

The textarea component provides a multi-line text input field, allowing users to enter longer blocks of text. It supports various configurations and states, similar to the input component.

Import

To use the textarea component, first import it into your project:

---
import { Textarea } from 'free-astro-components'
---

Usage

Here's how you can use the textarea component in your Astro project:

Basic Usage

To create a basic textarea field, use the following code:

Basic Textarea

Disabled

To disable the textarea field, set the disabled prop to true.

Disabled Textarea

---
import { Textarea } from 'free-astro-components'
---

<Textarea
  label="Disabled Textarea"
  placeholder="Disabled Textarea"
  disabled
/>
<Textarea
  label="Disabled Textarea"
  value="Disabled Textarea"
  placeholder="Disabled Textarea"
  disabled
/>

Readonly

To make the textarea field read-only, set the readonly prop to true.

Readonly Textarea

This textarea is read-only

With Icon

You can include an icon in the textarea field using the icon attribute. The icon will be displayed on the right side of the textarea. The icon can be selected from a list of available icons .

Textarea with icon

Helper Text

You can provide additional information using the helperText prop.

Textarea with Helper Text

This is some helper text.

Status

To indicate a specific state of the textarea field, use the status attribute. Possible values are default, success, and error. You can use helperText to provide additional context.

Default State

Success State

This is a success message. Error State

This is an error message.

---
import { Textarea } from 'free-astro-components'
---

<Textarea
  label="Default State"
  placeholder="Default state"
  status="default"
/>
<Textarea
  label="Success State"
  value="Success state"
  placeholder="Success state"
  status="success"
  helperText="This is a success message."
/>
<Textarea
  label="Error State"
  placeholder="Error state"
  status="error"
  helperText="This is an error message."
/>

Props

Attribute	Type	Description	Default
label	`string`	The text label associated with the textarea field.	-
placeholder	`string`	The placeholder text for the textarea field.	-
disabled	`boolean`	Whether the textarea field is disabled.	`false`
readonly	`boolean`	Whether the textarea field is read-only.	`false`
icon	`string`	The icon to display in the textarea field, on the right side. The icon can be selected from a list of available icons.	-
helperText	`string`	Additional text to assist the user.	-
status	`default \| success \| error`	The status of the textarea field.	`default`
class	`string`	CSS class for custom styling.	-
other	`any`	Any other props will be passed to the `textarea` element.	-

Accessibility

Keyboard Accessibility: Ensure that the input field can be focused and used with the keyboard.
ARIA Attributes: Use appropriate ARIA attributes to describe the state of the input, such as aria-invalid for error states.
Labeling: Provide clear labels for each input field to assist screen reader users.