Text area

A text area lets users enter long form text which spans over multiple lines.
ExamplesCodeUsageChangelog

10.2.3

Patch Changes

  • Updated dependencies

10.2.2

Patch Changes

10.2.1

Patch Changes

10.2.0

Minor Changes

Patch Changes

  • Updated dependencies

10.1.0

Minor Changes

  • d82e6f76528ab, (opens new window) - Add direct subpath package exports as part of the linking-platform, search, media, and design-system barrel-removal (de-barrel) migration.

    These packages now expose their individual modules via explicit package.json exports subpaths so that consumers can import directly from the leaf module (e.g. @atlaskit/pkg/thing) instead of the package barrel/index. This adds new public entry points without changing or removing any existing exports, so it is a backwards-compatible additive change.

    No runtime behaviour changes; this is an API-surface (entry-point) addition to support tree-shaking and to unblock removal of the barrel index files.

Patch Changes

  • Updated dependencies

10.0.0

Major Changes

  • 11ace7dc73878, (opens new window) - Apply Volt entry-point and multi-export standards via volt-migrate-package. This is a major change to @atlaskit/textarea: the package exports map has been restructured so both public subpaths now resolve directly to their ./src/* implementation instead of going through an intermediate ./src/entry-points/* re-export, and the two shim files have been removed. No public subpaths were added or removed.

    Why this is breaking

    Because each subpath now points straight at its implementation module, a subpath and the package root can resolve to the same module instance. Consumers that deep-import the internal entry-points/* files, or that jest.mock() a specific subpath, may observe changed resolution/behaviour and need updating.

    Migration — public imports are unchanged

    Importing the published subpaths (or the package root) continues to work as before:

    // Still valid — no change required import TextArea from '@atlaskit/textarea/text-area';

    If you were reaching into the internal entry-point modules, switch to the public subpath:

    -import TextArea from '@atlaskit/textarea/entry-points/text-area'; +import TextArea from '@atlaskit/textarea/text-area';

    Before / after exports map

    "exports": { ".": "./src/index.tsx", - "./text-area": "./src/entry-points/text-area.tsx", + "./text-area": "./src/text-area.tsx", - "./types": "./src/entry-points/types.tsx", + "./types": "./src/types.tsx", }

Patch Changes

  • Updated dependencies

9.1.5

Patch Changes

  • Updated dependencies

9.1.4

Patch Changes

9.1.3

Patch Changes

  • Updated dependencies

9.1.2

Patch Changes

  • Updated dependencies

9.1.1

Patch Changes

  • Updated dependencies

9.1.0

Minor Changes

  • cd097a2111788, (opens new window) - Republish packages depending on @atlaskit/react-compiler-gating so their published dependency reference is updated to the renamed @atlaskit/react-compiler-gating scope.

    The earlier rename of @atlassian/react-compiler-gating to @atlaskit/react-compiler-gating only bumped the renamed package itself, so dependent packages were never republished and their published versions still referenced the old @atlassian/react-compiler-gating name, which is not available in the public npm registry. This minor bump republishes all affected packages with the corrected dependency.

Patch Changes

  • Updated dependencies

9.0.1

Patch Changes

9.0.0

Major Changes

  • f2dc9097319f0, (opens new window) - ### Dropped support for legacy Typescript 4 types. Typescript 5 is now the new minimum.

    Removes the typesVersions property and dist/types-ts4.5 directory from the dist.

    Types are now exclusively via the "types": "dist/types/index.d.ts" property.

    - "typesVersions": { - ">=4.5 <4.9": { - "*": [ - "dist/types-ts4.5/*", - "dist/types-ts4.5/index.d.ts" - ] - } - },

Patch Changes

  • Updated dependencies

8.3.2

Patch Changes

  • Updated dependencies

8.3.1

Patch Changes

  • Updated dependencies

8.3.0

Minor Changes

Patch Changes

  • Updated dependencies

8.2.10

Patch Changes

  • Updated dependencies

8.2.9

Patch Changes

  • Updated dependencies

8.2.8

Patch Changes

  • Updated dependencies

8.2.7

Patch Changes

8.2.6

Patch Changes

8.2.5

Patch Changes

8.2.4

Patch Changes

  • Updated dependencies

8.2.3

Patch Changes

  • Updated dependencies

8.2.2

Patch Changes

  • Updated dependencies

8.2.1

Patch Changes

  • Updated dependencies

8.2.0

Minor Changes

8.1.0

Minor Changes

8.0.14

Patch Changes

  • Updated dependencies

8.0.13

Patch Changes

  • Updated dependencies

8.0.12

Patch Changes

  • Updated dependencies

8.0.11

Patch Changes

  • Updated dependencies

8.0.10

Patch Changes

8.0.9

Patch Changes

  • Updated dependencies

8.0.8

Patch Changes

8.0.7

Patch Changes

  • Updated dependencies

8.0.6

Patch Changes

  • Updated dependencies

8.0.5

Patch Changes

  • Updated dependencies

8.0.4

Patch Changes

  • Updated dependencies

8.0.3

Patch Changes

8.0.2

Patch Changes

8.0.1

Patch Changes

  • Updated dependencies

8.0.0

Major Changes

Patch Changes

  • Updated dependencies

7.1.0

Minor Changes

Patch Changes

  • Updated dependencies

7.0.1

Patch Changes

  • Updated dependencies

7.0.0

Major Changes

  • #113290, (opens new window) a8634aba15b6a, (opens new window) - Migrated from @emotion/react to @compiled/react in order to improve performance, align with the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to use this version of @atlaskit/textarea, you will need to ensure that your bundler is configured to handle .css imports correctly.

    Most bundlers come with built-in support for .css imports, so you may not need to do anything. If you are using a different bundler, please refer to the documentation for that bundler to understand how to handle .css imports. For more information on the migration, please refer to RFC-73 Migrating our components to Compiled CSS-in-JS, (opens new window).

    Removed styles.tsx and component-tokens.tsx and their entry points @atlaskit/textarea/component-tokens and @atlaskit/textarea/styles from package.json

6.0.0

Major Changes

  • #95577, (opens new window) ad478a9dbc399, (opens new window) - Migrated from @emotion/react to @compiled/react in order to improve performance, align with the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to use this version of @atlaskit/textarea, you will need to ensure that your bundler is configured to handle .css imports correctly.

    Most bundlers come with built-in support for .css imports, so you may not need to do anything. If you are using a different bundler, please refer to the documentation for that bundler to understand how to handle .css imports. For more information on the migration, please refer to RFC-73 Migrating our components to Compiled CSS-in-JS, (opens new window).

    Removed styles.tsx and component-tokens.tsx and their entry points from package.json

Patch Changes

  • Updated dependencies

5.8.2

Patch Changes

  • Updated dependencies

5.8.1

Patch Changes

  • Updated dependencies

5.8.0

Minor Changes

Patch Changes

  • Updated dependencies

5.7.3

Patch Changes

5.7.2

Patch Changes

  • Updated dependencies

5.7.1

Patch Changes

5.7.0

Minor Changes

  • #173737, (opens new window) 667640085e5c7, (opens new window) - Update the font size for the textarea and select components at the xs breakpoint. The font size will be increased to 16px to prevent IOS Safari from zooming in on the text field when it is focused. Styles for larger breakpoints will remain unchanged.

    Apply a fix to the textfield component to ensure monospace is correctly applied to the input at the media.above.xs breakpoint.

    These changes are currently behind a feature gate and will be evaluated for effectiveness. If successful, they will be included in a future release.

5.6.4

Patch Changes

5.6.3

Patch Changes

  • Updated dependencies

5.6.2

Patch Changes

  • Updated dependencies

5.6.1

Patch Changes

  • Updated dependencies

5.6.0

Minor Changes

  • #127511, (opens new window) db30e29344013, (opens new window) - Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0 to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).

    This change has been done to enable usage of react@18.3 as well as to have a consistent peer dependency range for react and react-dom for /platform packages.

Patch Changes

  • Updated dependencies

5.5.2

Patch Changes

  • Updated dependencies

5.5.1

Patch Changes

5.5.0

Minor Changes

Patch Changes

  • Updated dependencies

5.4.0

Minor Changes

5.3.0

Minor Changes

Patch Changes

  • Updated dependencies

5.2.0

Minor Changes

5.1.2

Patch Changes

5.1.1

Patch Changes

5.1.0

Minor Changes

Patch Changes

  • Updated dependencies

5.0.1

Patch Changes

5.0.0

Major Changes

4.7.7

Patch Changes

4.7.6

Patch Changes

4.7.5

Patch Changes

4.7.4

Patch Changes

4.7.3

Patch Changes

4.7.2

Patch Changes

4.7.1

Patch Changes

4.7.0

Minor Changes

4.6.3

Patch Changes

4.6.2

Patch Changes

4.6.1

Patch Changes

4.6.0

Minor Changes

Patch Changes

  • Updated dependencies

4.5.7

Patch Changes

4.5.6

Patch Changes

  • Updated dependencies

4.5.5

Patch Changes

  • Updated dependencies

4.5.4

Patch Changes

  • Updated dependencies

4.5.3

Patch Changes

  • Updated dependencies

4.5.2

Patch Changes

  • Updated dependencies

4.5.1

Patch Changes

4.5.0

Minor Changes

Patch Changes

4.4.0

Minor Changes

  • #24968, (opens new window) b8841384da6, (opens new window) - Disabled background and border styles should not be applied to components that have either no background or transparent background to begin with. Textfield and textarea variants that do not have backgrounds (sublte or none) have no backgrounds or borders applied when disabled. As such, any comopnents that consume these will also be affected.

4.3.11

Patch Changes

4.3.10

Patch Changes

4.3.9

Patch Changes

4.3.8

Patch Changes

4.3.7

Patch Changes

4.3.6

Patch Changes

4.3.5

Patch Changes

  • Updated dependencies

4.3.4

Patch Changes

4.3.3

Patch Changes

  • Updated dependencies

4.3.2

Patch Changes

  • Updated dependencies

4.3.1

Patch Changes

  • Updated dependencies

4.3.0

Minor Changes

4.2.6

Patch Changes

4.2.5

Patch Changes

  • Updated dependencies

4.2.4

Patch Changes

4.2.3

Patch Changes

  • Updated dependencies

4.2.2

Patch Changes

  • Updated dependencies

4.2.1

Patch Changes

  • Updated dependencies

4.2.0

Minor Changes

  • #13302, (opens new window) ae281b57bcd, (opens new window) - Instrumented Radio with the new theming package, @atlaskit/tokens.

    New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha). These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes

Patch Changes

4.1.3

Patch Changes

4.1.2

Patch Changes

4.1.1

Patch Changes

4.1.0

Minor Changes

4.0.2

Patch Changes

4.0.1

Patch Changes

4.0.0

Major Changes

  • #5860, (opens new window) 782b6e5182, (opens new window) - ### Brief

    The goal of this major for textarea is to improve the component's performance, by both

    reducing static structure and avoiding unnecessary function calls.

    We have made internal refactors and optimizations to improve textarea performance. Some changes made are as follows:

    • Moving TextArea to a single element (removed an internal wrapping element)

    • Replace styled-components to emotion as styling library

    • Moving internal component analytics to a more efficient usePlatformLeafEventHandler hook

    • Refactoring styles to recalculate only when theme & certain props change

    • Controlling CSS change via attributes instead of props

    TextArea now has single DOM element

    DOM element 2 -> 1 Removed div surrounding (wrapper) native textarea element and moved all behaviors and CSS to that single element.

    Measuring the height of the textarea element will now get different raw values because the text area is now rendering it’s own padding and border, but computed height is still the same.

    Upgrading with codemod

    # You first need to have the latest textarea installed before you can run the codemod yarn upgrade @atlaskit/textarea@^4.0.0

Run the codemod cli

Pass in a parser for your codebase

npx @atlaskit/codemod-cli /path/to/target/directory --parser [tsx | flow | babel]

## 3.0.5 ### Patch Changes - [#5497](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5497) [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option. This requires version 3.8 of Typescript, read more about how we handle Typescript versions here: https://atlaskit.atlassian.com/get-started Also add `typescript` to `devDependencies` to denote version that the package was built with. ## 3.0.4 ### Patch Changes - Updated dependencies ## 3.0.3 ### Patch Changes - [#4707](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/4707) [`6360c46009`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6360c46009) - Reenable integration tests for Edge browser ## 3.0.2 ### Patch Changes - [#3885](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3885) [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0 Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade to prevent duplicates of tslib being bundled. ## 3.0.1 ### Patch Changes - [#3823](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3823) [`e99262c6f0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e99262c6f0) - All form elements now have a default font explicitly set ## 3.0.0 ### Major Changes - [#3335](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3335) [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11. For more information see: https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/39534 ### Patch Changes - Updated dependencies ## 2.2.10 ### Patch Changes - [#2866](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2866) [`54a9514fcf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54a9514fcf) - Build and supporting files will no longer be published to npm ## 2.2.9 ### Patch Changes - Updated dependencies ## 2.2.8 ### Patch Changes - [#1868](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/1868) [`7aa4756beb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7aa4756beb) - Change imports to comply with Atlassian conventions- Updated dependencies ## 2.2.7 ### Patch Changes - [patch][109004a98e](https://bitbucket.org/atlassian/atlassian-frontend/commits/109004a98e): Deletes internal package @atlaskit/type-helpers and removes all usages. @atlaskit/type-helpers has been superseded by native typescript helper utilities.- Updated dependencies [168b5f90e5](https://bitbucket.org/atlassian/atlassian-frontend/commits/168b5f90e5): - Updated dependencies [0c270847cb](https://bitbucket.org/atlassian/atlassian-frontend/commits/0c270847cb): - Updated dependencies [109004a98e](https://bitbucket.org/atlassian/atlassian-frontend/commits/109004a98e): - Updated dependencies [b9903e773a](https://bitbucket.org/atlassian/atlassian-frontend/commits/b9903e773a): - @atlaskit/docs@8.5.1 - @atlaskit/theme@9.5.3 - @atlaskit/analytics-next@6.3.6 - @atlaskit/button@13.3.10 ## 2.2.6 ### Patch Changes - Updated dependencies [66dcced7a0](https://bitbucket.org/atlassian/atlassian-frontend/commits/66dcced7a0): - Updated dependencies [64fb94fb1e](https://bitbucket.org/atlassian/atlassian-frontend/commits/64fb94fb1e): - Updated dependencies [eea5e9bd8c](https://bitbucket.org/atlassian/atlassian-frontend/commits/eea5e9bd8c): - Updated dependencies [109c1a2c0a](https://bitbucket.org/atlassian/atlassian-frontend/commits/109c1a2c0a): - Updated dependencies [c57bb32f6d](https://bitbucket.org/atlassian/atlassian-frontend/commits/c57bb32f6d): - @atlaskit/docs@8.4.0 - @atlaskit/webdriver-runner@0.3.0 - @atlaskit/button@13.3.9 ## 2.2.5 ### Patch Changes - Updated dependencies [e3f01787dd](https://bitbucket.org/atlassian/atlassian-frontend/commits/e3f01787dd): - @atlaskit/webdriver-runner@0.2.0 - @atlaskit/button@13.3.8 ## 2.2.4 ### Patch Changes - [patch][6548261c9a](https://bitbucket.org/atlassian/atlassian-frontend/commits/6548261c9a): Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies [6548261c9a](https://bitbucket.org/atlassian/atlassian-frontend/commits/6548261c9a): - @atlaskit/docs@8.3.2 - @atlaskit/visual-regression@0.1.9 - @atlaskit/analytics-next@6.3.5 - @atlaskit/button@13.3.7 - @atlaskit/theme@9.5.1 - @atlaskit/type-helpers@4.2.3 ## 2.2.3 ### Patch Changes - [patch][24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff): Added name prop to component prop types.- Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff): - Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff): - @atlaskit/analytics-next@6.3.3 ## 2.2.2 ### Patch Changes - [patch][557a8e2451](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/557a8e2451): Rebuilds package to fix typescript typing error. ## 2.2.1 ### Patch Changes - [patch][a2d0043716](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/a2d0043716): Updated version of analytics-next to fix potential incompatibilities with TS 3.6 ## 2.2.0 ### Minor Changes - [minor][5679449552](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/5679449552): Adding an optional prop `testId` that will set the attribute value `data-testid`. It will help products to write better integration and end to end tests. ## 2.1.10 ### Patch Changes - [patch][097b696613](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/097b696613): Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports ## 2.1.9 ### Patch Changes - [patch][ecca4d1dbb](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/ecca4d1dbb): Upgraded Typescript to 3.3.x ## 2.1.8 ### Patch Changes - [patch][708028db86](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/708028db86): Change all the imports to theme in Core to use multi entry points ## 2.1.7 ### Patch Changes - [patch][de35ce8c67](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/de35ce8c67): Updates component maintainers ## 2.1.6 ### Patch Changes - [patch][926b43142b](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/926b43142b): Analytics-next has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No behavioural changes. **Breaking changes** - `withAnalyticsForSumTypeProps` alias has been removed, please use `withAnalyticsEvents` - `AnalyticsContextWrappedComp` alias has been removed, please use `withAnalyticsContext` **Breaking changes to TypeScript annotations** - `withAnalyticsEvents` now infers proptypes automatically, consumers no longer need to provide props as a generic type. - `withAnalyticsContext` now infers proptypes automatically, consumers no longer need to provide props as a generic type. - Type `WithAnalyticsEventProps` has been renamed to `WithAnalyticsEventsProps` to match source code - Type `CreateUIAnalyticsEventSignature` has been renamed to `CreateUIAnalyticsEvent` to match source code - Type `UIAnalyticsEventHandlerSignature` has been renamed to `UIAnalyticsEventHandler` to match source code - Type `AnalyticsEventsPayload` has been renamed to `AnalyticsEventPayload` - Type `ObjectType` has been removed, please use `Record<string, any>` or `[key: string]: any` - Type `UIAnalyticsEventInterface` has been removed, please use `UIAnalyticsEvent` - Type `AnalyticsEventInterface` has been removed, please use `AnalyticsEvent` - Type `CreateAndFireEventFunction` removed and should now be inferred by TypeScript - Type `AnalyticsEventUpdater` removed and should now be inferred by TypeScript ## 2.1.5 ### Patch Changes - [patch][9f8ab1084b](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/9f8ab1084b): Consume analytics-next ts type definitions as an ambient declaration. ## 2.1.4 ### Patch Changes - [patch][bbff8a7d87](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/bbff8a7d87): Fixes bug, missing version.json file ## 2.1.3 ### Patch Changes - [patch][18dfac7332](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/18dfac7332): In this PR, we are: - Re-introducing dist build folders - Adding back cjs - Replacing es5 by cjs and es2015 by esm - Creating folders at the root for entry-points - Removing the generation of the entry-points at the root Please see this [ticket](https://product-fabric.atlassian.net/browse/BUILDTOOLS-118) or this [page](https://hello.atlassian.net/wiki/spaces/FED/pages/452325500/Finishing+Atlaskit+multiple+entry+points) for further details ## 2.1.2 ### Patch Changes - [patch][d0db01b410](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/d0db01b410): TypeScript users of withAnalyticsEvents and withAnalyticsContext are now required to provide props as a generic type. This is so that TypeScript can correctly calculate the props and defaultProps of the returned component. Before: ```typescript withAnalyticsEvents()(Button) as ComponentClass<Props>;

After:

withAnalyticsEvents<Props>()(Button);

2.1.1

Patch Changes

2.1.0

Minor Changes

2.0.0

  • [major]7c17b35107, (opens new window):
    • Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To use this package, please ensure you use at least this version of react and react-dom.

1.0.0

0.4.6

0.4.5

  • [patch]cd67ae87f8, (opens new window):
    • Stop defaultValue from being omitted from props that are spread onto textarea
    • Constraint type of value and defaultValue to string

0.4.4

0.4.3

0.4.2

0.4.1

0.4.0

  • [minor]f504850fe2, (opens new window):
    • Fix bug: previous size was size for isCompact, and isCompact did not do anything. Now normal textarea is slightly larger and isCompact makes it the previous size

0.3.2

0.3.1

0.3.0

0.2.6

0.2.5

0.2.4

0.2.3

  • Updated dependencies 58b84fa, (opens new window):
    • @atlaskit/analytics-next@3.1.2
    • @atlaskit/button@10.1.1
    • @atlaskit/theme@7.0.1
    • @atlaskit/docs@6.0.0

0.2.2

0.2.1

  • [patch]d13242d, (opens new window):
    • Change API to experimental theming API to namespace component themes into separate contexts and make theming simpler. Update all dependant components.

0.2.0

  • [minor]76a8f1c, (opens new window):
    • Convert @atlaskit/textarea to Typescript
      • Dist paths have changed, if you are importing by exact file path you will need to update your imports import '@atlaskit/button/dist/es5/components/ButtonGroup'
      • Flow types are not present any more, Typescript definitions are shipped instead

0.1.1

  • Updated dependencies 6998f11, (opens new window):
    • @atlaskit/docs@5.2.1
    • @atlaskit/analytics-next@3.1.1
    • @atlaskit/theme@6.2.1
    • @atlaskit/button@10.0.0

0.1.0

  • [minor]9d77c4e, (opens new window):
    • New textarea package, meant to be a replacement for field-text-area, normalised component architecture, removed dependency on @atlaskit/field-base, updated to use new @atlaskit/theme api
Was this page helpful?
We use this feedback to improve our documentation.
© 2026 AtlassianTrademark, (opens new window)Privacy, (opens new window)License