components

Textarea (code)

A Textarea is a TextField that allows the user to write over multiple lines.

Enter your long message here

import { Textarea } from '@mediahuis/chameleon-react'

<Textarea
  label="Enter your long message here"
  id="top"
  placeholder="Long message"
/>

<Textarea
  label="Enter your long message here"
  id="top"
  placeholder="Long message"
/>

Props

Name	Type	Default	Required	Description
action	Node	-	-	Contents displayed within the ActionLabel.
className	String	-	-	Extend classNames.
cols	Number	-	-	The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
disabled	Boolean	-	-	Visually and functionally disables the Textarea.
error	Boolean	-	-	Visually displayed as error text. Will add the necessary accessibility tags.
id	String	-	true	Native HTML id attribute. Will also affect the label-id, and the message-id. For accessibility reasons.
label	Node	-	true	Contents displayed within the PrimaryLabel.
labelHidden	Boolean	-	-	Visibly hide the label. (label is still required for a11y)
maxLength	Number	-	-	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	-	-	Contents displayed beneath the input.
minLength	Number	-	-	The minimum number of characters (UTF-16 code units) required that the user should enter.
name	String	-	-	Name of the form element.
onBlur	Function	-	-	Fires when the Textarea loses focus.
onChange	Function	-	-	The event triggered, when the input value changes.
onFocus	Function	-	-	Fires when the Textarea receives focus.
optionalLabel	String	-	-	Contents displayed within the OptionalLabel.
placeholder	String	-	-	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	-	-	Indicates that the user cannot modify the value of the control
required	Boolean	-	-	Specifies that the user must fill in a value before submitting a form.
rows	Number	-	-	The number of visible text lines.
success	Boolean	-	-	Visually displayed as success text. Will add the necessary accessibility tags.
value	String	-	-	The value of the input.
wrap	'hard''soft''off'	-	-	Indicates how the control wraps text.

System Props

alignSelf, flex, flexBasis, flexGrow, flexShrink, order

position, bottom, left, right, top, zIndex

m, mb, ml, mr, mt, mx, my

p, pb, pl, pr, pt, px, py

width, maxWidth

float

System Props

Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.

To read more about the system, click here to check out its dedicated page.

Action

default: undefined

Adds an action or extra information to your item, mostly used for links.

LabelLinkText

<Textarea
  id="action"
  label="Label"
  action={<LinkText href="#">LinkText</LinkText>}
/>

<Textarea
  id="action"
  label="Label"
  action={<LinkText href="#">LinkText</LinkText>}
/>

Cols

default: undefined

This only affects the width of the textarea itself.

Label

<Textarea id="cols" label="Label" cols={10} />

<Textarea id="cols" label="Label" cols={10} />

Disabled

default: undefined

Marking a Textarea as disabled, will disable all interaction with the element.

Label

<Textarea id="disabled" label="Label" disabled />

<Textarea id="disabled" label="Label" disabled />

Error

default: undefined

To convey an error to the user, you can set the error prop to true.

Label

<Textarea id="error" label="Label" error />

<Textarea id="error" label="Label" error />

LabelHidden

default: undefined

To meet accessibility requirements, every TextField should have an associated label. We do support the ability to visually hide the label when the Textarea's purpose is clear.

Label

<Textarea
  id="labelHidden"
  label="Label"
  value="label & id are still required!"
  labelHidden
/>

<Textarea
  id="labelHidden"
  label="Label"
  value="label & id are still required!"
  labelHidden
/>

MaxLength

default: undefined

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. Make sure you don't overrule this programmatically.

Label

<Textarea
  id="maxLength"
  label="Label"
  value="You can't add more text in here."
  maxLength={32}
/>

<Textarea
  id="maxLength"
  label="Label"
  value="You can't add more text in here."
  maxLength={32}
/>

Message

default: undefined

Give additional information to the user.

Label

Message can be set to provide additional information.

<Textarea
  id="message"
  label="Label"
  message="Message can be set to provide additional information."
/>

<Textarea
  id="message"
  label="Label"
  message="Message can be set to provide additional information."
/>

MinLength

default: undefined

The minimum number of characters (UTF-16 code units) required that the user should enter. Make sure you still check this programmatically.

Label

() => {
  const minLength = 38;
  const [value, setValue] = React.useState(
    "You shouldn't write less text in here."
  );
  return (
    <Textarea
      id="minLength"
      label="Label"
      minLength={minLength}
      value={value}
      onChange={e => setValue(e.target.value)}
      error={value.length < minLength}
    />
  );
};

() => {
  const minLength = 38;
  const [value, setValue] = React.useState(
    "You shouldn't write less text in here."
  );
  return (
    <Textarea
      id="minLength"
      label="Label"
      minLength={minLength}
      value={value}
      onChange={e => setValue(e.target.value)}
      error={value.length < minLength}
    />
  );
};

OptionalLabel (Required fields)

default: undefined

By default the Textarea is always required. To make a Textarea optional you can add the optionalLabel prop.

With Chameleon we take a specific approach where we encourage marking optional fields, not required. The majority of fields in a form are always required. Indicating that fields are required make users more fearful, it increases the risk of errors and reduces the form completion rate.

Label(I'm optional)

<Textarea id="optionalLabel" label="Label" optionalLabel="I'm optional" />

<Textarea id="optionalLabel" label="Label" optionalLabel="I'm optional" />

Placeholder

default: undefined

Placeholder text is displayed inside the field but is not always necessary. They should be written as examples helping users to understand the required input instead of instructions.

Label

<Textarea id="placeholder" label="Label" placeholder="Placeholder" />

<Textarea id="placeholder" label="Label" placeholder="Placeholder" />

ReadOnly

default: undefined

It's not possible to write text inside the Textarea

Label

You can't change me.

<Textarea id="readOnly" readOnly label="Label" value="You can't change me." />

<Textarea id="readOnly" readOnly label="Label" value="You can't change me." />

Required

default: true

By default the Textarea is required. You can change this by providing an optionalLabel or passing false to the required prop. We encourage you to use the optionalLabel prop, this provides additional feedback to the user!

Label

<Textarea id="required" required={false} label="Label" />

<Textarea id="required" required={false} label="Label" />

Rows

default: 2

To increase the default height of the Textarea, you can provide the number of initial rows.

Write us a story

<Textarea id="rows" label="Write us a story" rows={10} />

<Textarea id="rows" label="Write us a story" rows={10} />

Wrap

default: soft

Altering the wrap prop, will either not wrap the inputted text (off), or it will actually wrap the inputted text. The difference between hard and soft is that with hard, the value submitted will include the linebreaks.

Write us a story

<Textarea
  id="hard"
  label="Write us a story"
  wrap="hard"
  value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia lobortis erat vitae volutpat. Fusce in nunc pulvinar, rutrum nulla non, blandit nunc. Nullam orci leo, mattis in lorem quis, pharetra pellentesque tortor. Vivamus malesuada cursus lacus, nec posuere diam iaculis in. Praesent sollicitudin, tortor eget tempor malesuada, mi ex blandit ipsum, ut tincidunt urna orci bibendum massa. Maecenas ultricies justo non elementum malesuada."
/>
<Textarea
  id="soft"
  label="Write us a story"
  wrap="soft"
  value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia lobortis erat vitae volutpat. Fusce in nunc pulvinar, rutrum nulla non, blandit nunc. Nullam orci leo, mattis in lorem quis, pharetra pellentesque tortor. Vivamus malesuada cursus lacus, nec posuere diam iaculis in. Praesent sollicitudin, tortor eget tempor malesuada, mi ex blandit ipsum, ut tincidunt urna orci bibendum massa. Maecenas ultricies justo non elementum malesuada."
/>
<Textarea
  id="off"
  label="Write us a story"
  wrap="off"
  value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia lobortis erat vitae volutpat. Fusce in nunc pulvinar, rutrum nulla non, blandit nunc. Nullam orci leo, mattis in lorem quis, pharetra pellentesque tortor. Vivamus malesuada cursus lacus, nec posuere diam iaculis in. Praesent sollicitudin, tortor eget tempor malesuada, mi ex blandit ipsum, ut tincidunt urna orci bibendum massa. Maecenas ultricies justo non elementum malesuada."
/>

<Textarea
  id="hard"
  label="Write us a story"
  wrap="hard"
  value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia lobortis erat vitae volutpat. Fusce in nunc pulvinar, rutrum nulla non, blandit nunc. Nullam orci leo, mattis in lorem quis, pharetra pellentesque tortor. Vivamus malesuada cursus lacus, nec posuere diam iaculis in. Praesent sollicitudin, tortor eget tempor malesuada, mi ex blandit ipsum, ut tincidunt urna orci bibendum massa. Maecenas ultricies justo non elementum malesuada."
/>
<Textarea
  id="soft"
  label="Write us a story"
  wrap="soft"
  value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia lobortis erat vitae volutpat. Fusce in nunc pulvinar, rutrum nulla non, blandit nunc. Nullam orci leo, mattis in lorem quis, pharetra pellentesque tortor. Vivamus malesuada cursus lacus, nec posuere diam iaculis in. Praesent sollicitudin, tortor eget tempor malesuada, mi ex blandit ipsum, ut tincidunt urna orci bibendum massa. Maecenas ultricies justo non elementum malesuada."
/>
<Textarea
  id="off"
  label="Write us a story"
  wrap="off"
  value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia lobortis erat vitae volutpat. Fusce in nunc pulvinar, rutrum nulla non, blandit nunc. Nullam orci leo, mattis in lorem quis, pharetra pellentesque tortor. Vivamus malesuada cursus lacus, nec posuere diam iaculis in. Praesent sollicitudin, tortor eget tempor malesuada, mi ex blandit ipsum, ut tincidunt urna orci bibendum massa. Maecenas ultricies justo non elementum malesuada."
/>

Value

default: undefined

Use value for controlled Textfields.

Label

() => {
  const [value, setValue] = React.useState('The value inside.');
  return (
    <Textarea
      id="value"
      label="Label"
      value={value}
      onChange={e => setValue(e.target.value)}
    />
  );
};

() => {
  const [value, setValue] = React.useState('The value inside.');
  return (
    <Textarea
      id="value"
      label="Label"
      value={value}
      onChange={e => setValue(e.target.value)}
    />
  );
};