Elanor

Text area

Last updated

A multi-line text field for longer input, such as descriptions or comments. Pair it with a visible label, using Field or Control and label.

Up to 240 characters.
Code
demo.tsx 
import {Field, TextArea} from '@earendil-works/elanor-react';

export default function TextAreaDemo() {
  return (
    <Field.Root name="description">
      <Field.Label>Project description</Field.Label>
      <TextArea
        rows={4}
        maxLength={240}
        defaultValue="A shared space for our team's design reviews and release notes."
      />
      <Field.Description>Up to 240 characters.</Field.Description>
    </Field.Root>
  );
}

Usage

import {Field, TextArea} from '@earendil-works/elanor-react';

<Field.Root name="description">
  <Field.Label>Project description</Field.Label>
  <TextArea rows={4} />
</Field.Root>;

rows sets the initial height. State a maxLength in the description, as the demo does.

Monospace

Set monospace for code, such as JSON or configuration. It only changes the typeface; turn off spell check, autocorrect, and autocapitalization yourself.

A JSON object.
Code
monospace.tsx 
import {Field, TextArea} from '@earendil-works/elanor-react';

export default function TextAreaMonospace() {
  return (
    <Field.Root name="configuration">
      <Field.Label>Configuration</Field.Label>
      <TextArea
        monospace
        rows={6}
        spellCheck={false}
        autoCapitalize="none"
        autoCorrect="off"
        defaultValue={JSON.stringify(
          {name: 'design-reviews', public: false, retention: 30},
          null,
          2,
        )}
      />
      <Field.Description>A JSON object.</Field.Description>
    </Field.Root>
  );
}

API

TextArea

PropTypeDefaultDescription
onValueChangeBaseField.Control.Props['onValueChange']-Called with the new value on each change.
monospacebooleanfalseUses the code typeface, for input such as JSON or configuration.

Renders <textarea>. Also accepts its HTML attributes and ref.

↑↓to select↵to openEscto close