Textarea: React
The Textarea component represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text.
Installation
Before you can start using the @mediahuis/chameleon-react component, you’ll need to install it, for more information check: Getting started for developers.
With that done, you’re now ready to implement the component in your application.
import { Textarea } from '@mediahuis/chameleon-react';
export default function Example() {
return <Textarea id="textarea-1" label="Textarea Example" />;
}
Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
action | ReactNode | - | No | Contents displayed within the ActionLabel. |
className | String | - | No | Allows extending the class names of the component. |
cols | Number | - | No | The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. |
disabled | Boolean | - | No | Visually and functionally disables the Textarea. |
error | Boolean | - | No | Visually displayed as error text. Adds necessary accessibility tags. |
id | String | - | Yes | Native HTML id attribute. Also affects label-id and message-id for accessibility reasons. |
label | ReactNode | - | Yes | Contents displayed within the PrimaryLabel. |
labelHidden | Boolean | - | No | Visually hide the label. (label is still required for a11y) |
maxLength | Number | - | No | The maximum number of characters (UTF-16 code units) that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters. |
message | String | - | No | Contents displayed beneath the input. |
minLength | Number | - | No | The minimum number of characters (UTF-16 code units) required that the user should enter. |
name | String | - | No | Name of the form element. |
onBlur | FocusEventHandler | - | No | Fires when the Textarea loses focus. |
onChange | ChangeEventHandler | - | No | The event triggered when the input value changes. |
onFocus | FocusEventHandler | - | No | Fires when the Textarea receives focus. |
optionalLabel | String | - | No | Contents displayed within the OptionalLabel. |
placeholder | String | - | No | A hint to the user of what can be entered in the control. Carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint. |
readOnly | Boolean | - | No | Indicates that the user cannot modify the value of the control. |
required | Boolean | - | No | Specifies that the user must fill in a value before submitting a form. |
rows | Number | - | No | The number of visible text lines. |
success | Boolean | - | No | Visually displayed as success text. Adds necessary accessibility tags. |
value | String | - | No | The value of the input. |
wrap | 'hard' | 'soft' | 'off' | - | No | Indicates how the control wraps text. |
required
Chameleon form inputs are required by default, with the required attribute automatically set. To mark a field as optional, pass the optionalLabel prop to remove the required attribute.