Textarea

Textarea is a React component designed to create customizable input fields with various options such as placeholder, color, label, and more. It supports different variants like outlined, filled, and standard, along with size and color customization.

Example Preview

Textarea Example

Usage

import { Textarea } from "@/@core";
 
// Use Textarea in your component
<Textarea
  placeholder="Enter text"
  label="Username"
  variant="outlined"
  helperText="Please enter your username"
  disabled={false}
  defaultValue=""
  value=""
  error={false}
  size="md"
  color="ghost"
  // Additional HTML attributes can be passed as well
  onChange={(e) => console.log(e.target.value)}
/>;

Props

Prop name	Type	Default value	Required	Description
`placeholder`	string	-	No	Placeholder text for the input field.
`className`	string	-	No	Additional CSS classes for styling.
`label`	string	-	No	Label for the input field.
`variant`	`filled`, `outlined`, `standard`	`standard`	No	Input field variant.
`helperText`	string	-	No	Helper text displayed below the input field.
`disabled`	boolean	`false`	No	Disables the input field.
`defaultValue`	string	-	No	Default value for the input field.
`value`	string	-	No	Controlled value for the input field.
`error`	boolean	`false`	No	Indicates whether there's an error with the input.
`size`	`xs`, `sm`, `md`, `lg`	`md`	No	Size of the input field.
`color`	`primary`, `secondary`, `error`, `success`, `warning`, `info`, `accent`, `ghost`	`primary`	No	Color of the input field.
`props`	HTMLAttributes<HTMLTextAreaElement>	-	No	Additional HTML attributes can be passed as well.

Additionally, it accepts all HTML input attributes (HTMLAttributes<HTMLTextAreaElement>).

Styling

The component allows for extensive styling customization through the use of various classes based on the specified options. These classes can be passed through the className prop.

For example, to style the input field with a specific color and size, you can pass additional classes:

<Textarea
  className="custom-style primary-color lg"
  // other props...
/>

In the above example, the input field will have the styles defined by the 'custom-style', 'primary-color', and 'lg' classes. Refer to the source code for a detailed list of available classes.

ℹ️

Note: The InputField component is inspired by the DaisyUI (opens in a new tab) framework. Check it out for more awesome components. But our InputField component is dynamic and easy to use. It is also fully customizable.

Text Field Toggle