Textarea

Examples

Basic

Textareas collect data from the user and allow multiple lines of text.

<ods-textarea></ods-textarea>

import { OdsTextarea } from '@ods/components/react.textarea';

const Example = () => {
  return (
    <OdsTextarea></OdsTextarea>
  )
}

export default Example;

Label

Use the label attribute to give the textarea an accessible label. For labels that contain HTML, use the label slot instead.

<ods-textarea label="Comments"></ods-textarea>

import { OdsTextarea } from '@ods/components/react.textarea';

const Example = () => {
  return (
    <OdsTextarea label="Comments"></OdsTextarea>
  )
}

export default Example;

Help Text

Add descriptive help text to a textarea with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.

<ods-textarea label="Feedback" help-text="Please tell us what you think."></ods-textarea>

import { OdsTextarea } from '@ods/components/react.textarea';

const Example = () => {
  return (
    <OdsTextarea
      label="Feedback"
      help-text="Please tell us what you think.">
    </OdsTextarea>
  )
}

export default Example;

Placeholders

Use the placeholder attribute to add a placeholder.

<ods-textarea placeholder="Placeholder text"></ods-textarea>

import { OdsTextarea } from '@ods/components/react.textarea';

const Example = () => {
  return (
    <OdsTextarea placeholder="Placeholder text"></OdsTextarea>
  )
}

export default Example;

Count

Use the maxlength and show-count-text attributes together to show a text counter while the user types into the input.

<ods-textarea show-count-text maxlength="100"></ods-textarea>

import { OdsTextarea } from '@ods/components/react.textarea';

const Example = () => {
  return (
    <OdsTextarea
      show-count-text
      maxlength={100}>
    </OdsTextarea>
  )
}

export default Example;

Required

Use the required attribute to specify the textarea is a required field when using within a form.

<ods-textarea required label="Label">
</ods-textarea>

import { OdsTextarea } from '@ods/components/react.textarea';

const Example = () => {
  return (
    <OdsTextarea
      required
      label="Label">
    </OdsTextarea>
  )
}

export default Example;

Disabled

Use the disabled attribute to disable a textarea.

<ods-textarea label="Label" placeholder="Disabled" disabled required help-text="Sample help text" maxlength="5" show-count-text></ods-textarea>

import { OdsTextarea } from '@ods/components/react.textarea';

const Example = () => {
  return (
    <OdsTextarea
      label='Label'
      placeholder="Disabled"
      disabled
      required
      help-text="Sample error text"
      maxlength={5}
      show-count-text>
    </OdsTextarea>
  )
}

export default Example;

Read Only

Use the readonly attribute to make a textarea read-only.

<ods-textarea label="Label" placeholder="Read Only" readonly help-text="Sample help text" maxlength="5" show-count-text value="abc"></ods-textarea>

import { OdsTextarea } from '@ods/components/react.textarea';

const Example = () => {
  return (
    <OdsTextarea
      label='Label'
      placeholder="Read Only"
      readonly
      help-text="Sample error text"
      maxlength={5}
      show-count-text
      value="abc">
    </OdsTextarea>
  )
}

export default Example;

Error

Use the error-text attribute to customize the error message shown. Read more about error validation here .

<form novalidate>
    <ods-textarea required label="Label" error-text="Sample error text" maxlength="5" show-count-text></ods-textarea>
</form>

import { OdsTextarea } from '@ods/components/react.textarea';

const Example = () => {
  return (
    <form noValidate>
      <OdsTextarea
        required
        label="Label"
        error-text="Sample error text"
        maxlength={5}
        show-count-text>
      </OdsTextarea>
    </form>
  )
}

export default Example;

Rows

Use the rows attribute to change the number of text rows that get shown.

<ods-textarea rows="2"></ods-textarea>

import { OdsTextarea } from '@ods/components/react.textarea';

const Example = () => {
  return (
    <OdsTextarea rows={2}></OdsTextarea>
  )
}

export default Example;

Prevent Resizing

By default, textareas can be resized vertically by the user. To prevent resizing, set the resize attribute to none.

<ods-textarea resize="none"></sl-sense>

import { OdsTextarea } from '@ods/components/react.textarea';

const Example = () => {
  return (
    <OdsTextarea resize="none"></OdsTextarea>
  )
}

export default Example;

Expand with Content

Textareas will automatically resize to expand to fit their content when resize is set to auto.

<ods-textarea resize="auto"></sl-sense>

import { OdsTextarea } from '@ods/components/react.textarea';

const Example = () => {
  return (
    <OdsTextarea resize="auto"></OdsTextarea>
  )
}

export default Example;

Handling An Event

You can listen for the ods-input event to determine when a textarea is updated. To see other textarea events check out the events below . You can also see how the textarea is used in forms by checking out the form section .

<ods-textarea id="textarea-example"></ods-textarea>

<script>
  const textarea = document.getElementById('textarea-example');

  const onInputHandler = (event) => {
    const target = event.target;

    alert(`Textarea value is ${target.value}`);
  };

  textarea.addEventListener('ods-input', (event) => onInputHandler(event));
</script>

import { OdsTextarea } from '@ods/components/react.textarea';
import { OdsInputEvent } from '@ods/components/react';

export const Example = () => {
  const onInputHandler = (event: OdsInputEvent) => {
    const target = event.target as HTMLTextAreaElement;

    alert(`Textarea value is ${target.value}`);
  };

  return (
    <OdsTextarea onOdsInput={onInputHandler}></OdsTextarea>
  )
}

export default Example;

Importing

import '@ods/components/web.textarea';

import { OdsTextarea } from '@ods/components/react.textarea';

import { OdsTextarea } from '@ods/components/react.textarea';