import { Meta } from '@storybook/addon-docs/blocks';

Textarea Migration

Fluent UI Northstar (v0) provides the TextArea control to allow users to enter and edit multi-line text. Fluent UI v9 provides a Textarea control, but has a different API.

Examples

Basic Migration

Basic usage of TextArea v0

tsx

import React from 'react';
import { TextArea } from '@fluentui/react-northstar';

const TextAreaV0BasicExample = () => {
  const textAreaId = 'textArea';

  return (
    <>
      <Label htmlFor={textAreaId} content="Enter review" />
      <TextArea id={textAreaId} placeholder="Type here..." />
    </>
  );
};

export default TextAreaExample;

An equivalent Textarea in v9 is

tsx

import * as React from 'react';
import { Label, Textarea } from '@fluentui/react-components';
import { useId } from '@fluentui/react-utilities';

const TextareaV9BasicExample = () => {
  const textareaId = useId('textarea');
  return (
    <>
      <Label htmlFor={textareaId}>Enter review</Label>
      <Textarea id={textareaId} placeholder="Type here..." />
    </>
  );
};

Props Mapping

This table maps TextArea v0 props to the Textarea v9 equivalent.

v0	v9	Notes
`accessibility`	n/a
`as`	n/a
`className`	`className`
`defaultValue`	`defaultValue`	Mutually exclusive with `value`
`design`	n/a
`disabled`	`disabled`
`error`	n/a
`fluid`	n/a
`inverted`	`appearance`	The equivalent appearance would be `filledLighter`
`key`	`key`
`onChange`	`onChange`
`ref`	`ref`
`required`	`required`
`resize`	`resize`
`styles`	`className`
`value`	`value`	Mutually exclusivewith `defaultValue`
`variables`	n/a	Use `FluentProvider` to customize themes