Text field

A text field is an input that allows a user to write or edit text.
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.1

Patch Changes

10.0.0

Major Changes

  • 48e7d03469b80, (opens new window) - Apply Volt entry-point and barrel-removal standards across these design-system packages. Public exports now resolve directly to ./src/* implementations instead of intermediate ./src/entry-points/* re-exports, root barrels and remaining entry-point shims are marked deprecated in favour of per-export subpaths, and a few new subpaths are added (@atlaskit/badge/badge-new, @atlaskit/tile/tile-skeleton, @atlaskit/popper/main, @atlaskit/section-message/message, @atlaskit/section-message/message-action).

    Why this is breaking

    Subpaths and the package root can now resolve to the same module instance. Consumers that deep-imported entry-points/*, or jest.mock()'d a specific subpath may need updates. @atlaskit/image's root export now points at ./src/ui/image/index.tsx. @atlaskit/checkbox/checkbox now exports a named Checkbox from the implementation module (default export retained for backwards compatibility).

    Migration

    Prefer published subpaths over the package root:

    import { Checkbox } from '@atlaskit/checkbox/checkbox'; import TextField from '@atlaskit/textfield/text-field'; import Popup from '@atlaskit/popup/popup'; import SectionMessage from '@atlaskit/section-message/message'; import EmptyState from '@atlaskit/empty-state/empty-state';

    If you imported through internal entry-point modules, switch to the public subpath:

    -import Checkbox from '@atlaskit/checkbox/entry-points/checkbox'; +import { Checkbox } from '@atlaskit/checkbox/checkbox';

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

8.2.6

Patch Changes

8.2.5

Patch Changes

8.2.4

Patch Changes

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.15

Patch Changes

  • Updated dependencies

8.0.14

Patch Changes

  • Updated dependencies

8.0.13

Patch Changes

8.0.12

Patch Changes

8.0.11

Patch Changes

8.0.10

Patch Changes

  • Updated dependencies

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

8.0.4

Patch Changes

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.0.0

Major Changes

  • #114073, (opens new window) b5b9031ffaa05, (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/textfield, 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).

6.8.3

Patch Changes

  • Updated dependencies

6.8.2

Patch Changes

  • Updated dependencies

6.8.1

Patch Changes

  • Updated dependencies

6.8.0

Minor Changes

Patch Changes

  • Updated dependencies

6.7.2

Patch Changes

6.7.1

Patch Changes

  • Updated dependencies

6.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.

6.6.0

Minor Changes

  • #161890, (opens new window) 6735226160872, (opens new window) - Update the font size and padding styles for the text field component 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.

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

6.5.5

Patch Changes

6.5.4

Patch Changes

  • Updated dependencies

6.5.3

Patch Changes

6.5.2

Patch Changes

  • Updated dependencies

6.5.1

Patch Changes

  • Updated dependencies

6.5.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

6.4.3

Patch Changes

  • Updated dependencies

6.4.2

Patch Changes

6.4.1

Patch Changes

6.4.0

Minor Changes

Patch Changes

  • Updated dependencies

6.3.1

Patch Changes

6.3.0

Minor Changes

Patch Changes

  • Updated dependencies

6.2.0

Minor Changes

6.1.3

Patch Changes

6.1.2

Patch Changes

6.1.1

Patch Changes

6.1.0

Minor Changes

Patch Changes

  • Updated dependencies

6.0.1

Patch Changes

6.0.0

Major Changes

5.6.8

Patch Changes

5.6.7

Patch Changes

5.6.6

Patch Changes

5.6.5

Patch Changes

5.6.4

Patch Changes

5.6.3

Patch Changes

5.6.2

Patch Changes

5.6.1

Patch Changes

5.6.0

Minor Changes

5.5.2

Patch Changes

5.5.1

Patch Changes

5.5.0

Minor Changes

5.4.3

Patch Changes

5.4.2

Patch Changes

5.4.1

Patch Changes

5.4.0

Minor Changes

Patch Changes

  • Updated dependencies

5.3.7

Patch Changes

5.3.6

Patch Changes

  • Updated dependencies

5.3.5

Patch Changes

  • Updated dependencies

5.3.4

Patch Changes

  • Updated dependencies

5.3.3

Patch Changes

  • Updated dependencies

5.3.2

Patch Changes

  • Updated dependencies

5.3.1

Patch Changes

5.3.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.

5.2.2

Patch Changes

5.2.1

Patch Changes

5.2.0

Minor Changes

Patch Changes

  • Updated dependencies

5.1.13

Patch Changes

5.1.12

Patch Changes

5.1.11

Patch Changes

  • Updated dependencies

5.1.10

Patch Changes

5.1.9

Patch Changes

  • Updated dependencies

5.1.8

Patch Changes

5.1.7

Patch Changes

  • Updated dependencies

5.1.6

Patch Changes

5.1.5

Patch Changes

  • Updated dependencies

5.1.4

Patch Changes

5.1.3

Patch Changes

  • Updated dependencies

5.1.2

Patch Changes

  • Updated dependencies

5.1.1

Patch Changes

  • Updated dependencies

5.1.0

Minor Changes

  • #13302, (opens new window) 78ba9e045b8, (opens new window) - Internal refactor to align to the design system techstack.

  • 4d34d35270e, (opens new window) - Instrumented text field 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

5.0.5

Patch Changes

5.0.4

Patch Changes

5.0.3

Patch Changes

5.0.2

Patch Changes

5.0.1

Patch Changes

5.0.0

Major Changes

  • #7170, (opens new window) 9d0f54a809, (opens new window)

    Summary

    The goal of this major for TextField is to improve the component's performance, by both reducing static structure and avoiding unnecessary function calls.

    Changes

    In this version we improved the performance of TextField by making it more similar to a native input field and removing the slow theme prop.

    Theming

    The theme prop allows you to customize the appearance of TextField. Theming was previously used to customize the container div and input element styling in TextField. We found that there was minimal usage of this API and it was identified to have a negative performance impact regardless of whether it was used.

    We decided to remove this API to benefit all consumers of TextField. If you would like to continue customizing TextField we have added data attributes (data-ds--text-field--container and data-ds--text-field--input) to both container div and input element of TextField. Therefore consumers can use this if they want to override style of respective element in TextField. For example,

    import React from 'react'; import { css } from '@emotion/core'; import { TextField } from '@atlaskit/textfield'; export default function CustomStyleExample() { return ( <TextField css={{ padding: 5, border: '2px solid orange', '& > [data-ds--text-field--input]': { fontSize: 20, border: '2px solid green', }, }} /> ); }

    You can also override CSS using className and data-attributes in TextField.

    // component import React from 'react'; import { TextField } from '@atlaskit/textfield'; import './styles.css'; export default () => { return ( <TextField width="large" className='myClass' /> ); }; // styles.css .myClass [data-ds--text-field--container] { border: 2px solid orange; padding: 5px; } .myClass [data-ds--text-field--input] { border: 2px solid green; font-size: 20px; };

    Note that TextField still supports the light mode / dark mode global token. Along with this change we have removed the exports ThemeProps, ThemeTokens and Theme from TextField as they can no longer be used with the removal of theme.

    Other changes

    • Previously all interaction styles were generated in JavaScript using events, causing unnecessary and slow re-renders for actions like hovering and focusing. Now all styles for the TextField are applied using CSS selectors.
    • Updated the entry point to only export TextField and TextFieldProps. These exports ThemeProps, ThemeTokens and Theme have now been removed.

    Automatic upgrading

    There is a codemod that assists you in upgrading most of the changes from above. However, a manual step is still required to override styles via data attributes.

    • Removes theme and overrides prop.
    • Removes imports of ThemeProps, ThemeTokens and Theme.
    # You first need to have the latest `TextField` installed before you can run the codemod `yarn upgrade @atlaskit/textfield@^5.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]

4.0.10

Patch Changes

4.0.9

Patch Changes

4.0.8

Patch Changes

  • Updated dependencies

4.0.7

Patch Changes

4.0.6

Patch Changes

4.0.5

Patch Changes

4.0.4

Patch Changes

4.0.3

Patch Changes

4.0.2

Patch Changes

4.0.1

Patch Changes

4.0.0

Major Changes

Patch Changes

  • Updated dependencies

3.1.13

Patch Changes

3.1.12

Patch Changes

3.1.11

Patch Changes

  • Updated dependencies

3.1.10

Patch Changes

3.1.9

Patch Changes

3.1.8

Patch Changes

3.1.7

Patch Changes

3.1.6

Patch Changes

  • [patch]6548261c9a, (opens new window):

    Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a, (opens new window):

    • @atlaskit/docs@8.3.2
    • @atlaskit/visual-regression@0.1.9
    • @atlaskit/analytics-next@6.3.5
    • @atlaskit/avatar@17.1.7
    • @atlaskit/button@13.3.7
    • @atlaskit/form@7.1.2
    • @atlaskit/icon@20.0.1
    • @atlaskit/theme@9.5.1

3.1.5

Patch Changes

3.1.4

Patch Changes

3.1.3

Patch Changes

3.1.2

Patch Changes

3.1.1

Patch Changes

3.1.0

Minor Changes

  • [minor]9638c553c0, (opens new window):

    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.

3.0.7

Patch Changes

3.0.6

3.0.5

Patch Changes

  • [patch]097b696613, (opens new window):

    Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports

3.0.4

Patch Changes

3.0.3

Patch Changes

3.0.2

Patch Changes

3.0.1

3.0.0

Major Changes

  • [major]84887b940c, (opens new window):
    • Converting from flow to typescript 🎉
    • Correctly typing the current prop spreading onto the internal <input> element
    • Removing isHovered and isFocused from public API as they previously did not do anything

2.0.5

Patch Changes

2.0.4

Patch Changes

2.0.3

  • Updated dependencies 06326ef3f7, (opens new window):
    • @atlaskit/docs@8.1.3
    • @atlaskit/avatar@16.0.6
    • @atlaskit/button@13.0.9
    • @atlaskit/form@6.1.1
    • @atlaskit/icon@19.0.0

2.0.2

Patch Changes

2.0.1

  • Updated dependencies cfc3c8adb3, (opens new window):
    • @atlaskit/docs@8.1.2
    • @atlaskit/avatar@16.0.3
    • @atlaskit/button@13.0.8
    • @atlaskit/form@6.0.5
    • @atlaskit/icon@18.0.0

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.5

0.4.4

  • Updated dependencies 9c0b4744be, (opens new window):
    • @atlaskit/docs@7.0.3
    • @atlaskit/avatar@15.0.4
    • @atlaskit/button@12.0.3
    • @atlaskit/form@5.2.7
    • @atlaskit/icon@16.0.9
    • @atlaskit/theme@8.1.7

0.4.3

  • Updated dependencies 1e826b2966, (opens new window):
    • @atlaskit/docs@7.0.2
    • @atlaskit/analytics-next@4.0.3
    • @atlaskit/avatar@15.0.3
    • @atlaskit/form@5.2.5
    • @atlaskit/icon@16.0.8
    • @atlaskit/theme@8.1.6
    • @atlaskit/button@12.0.0

0.4.2

0.4.1

0.4.0

0.3.1

  • Updated dependencies 9d5cc39394, (opens new window):
    • @atlaskit/docs@7.0.1
    • @atlaskit/analytics-next@4.0.1
    • @atlaskit/form@5.2.1
    • @atlaskit/theme@8.0.1
    • @atlaskit/button@11.0.0

0.3.0

  • [minor]76299208e6, (opens new window):

    • Drop ES5 from all the flow modules

    Dropping CJS support in all @atlaskit packages

    As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only distribute esm. This means all distributed code will be transpiled, but will still contain import and export declarations.

    The major reason for doing this is to allow us to support multiple entry points in packages, e.g:

    import colors from `@atlaskit/theme/colors`;

    Previously this was sort of possible for consumers by doing something like:

    import colors from `@atlaskit/theme/dist/esm/colors`;

    This has a couple of issues. 1, it treats the file system as API making internal refactors harder, we have to worry about how consumers might be using things that aren't actually supposed to be used. 2. We are unable to do this internally in @atlaskit packages. This leads to lots of packages bundling all of theme, just to use a single color, especially in situations where tree shaking fails.

    To support being able to use multiple entrypoints internally, we unfortunately cannot have multiple distributions as they would need to have very different imports from of their own internal dependencies.

    ES Modules are widely supported by all modern bundlers and can be worked around in node environments.

    We may choose to revisit this solution in the future if we find any unintended condequences, but we see this as a pretty sane path forward which should lead to some major bundle size decreases, saner API's and simpler package architecture.

    Please reach out to #fabric-build (if in Atlassian) or create an issue in Design System Support, (opens new window) (for external) if you have any questions or queries about this.

0.2.0

  • [minor]e9b824bf86, (opens new window):

    • Breaking: Changes to the theme prop. The type of this prop remains as (ThemeTokens, ThemeProps) => ThemeTokens.
      • The shape of ThemeTokens has changed. container and input keys are now required. The value of these keys are style objects.
      • More information has been added to ThemeProps.
    type ThemeTokens = { - backgroundColor: string - backgroundColorFocus: string - backgroundColorHover: string - borderColor: string - borderColorFocus: string - textColor: string - disabledTextColor: string - placeholderTextColor: string + container: Object, + input: Object } type ThemeProps = { appearance: ThemeAppearance, mode: 'dark' | 'light', + isDisabled: boolean, + isFocused: boolean, + isHovered: boolean, + isInvalid: boolean, + isMonospaced: boolean, + isCompact: boolean, + width?: string | number, };

0.1.6

0.1.5

0.1.4

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

0.1.3

0.1.2

0.1.1

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

0.1.0

  • [minor]62109bd, (opens new window):
    • Refactor of field-text to remove field-base and normalise along api patterns established in other form components.
Was this page helpful?
We use this feedback to improve our documentation.
© 2026 AtlassianTrademark, (opens new window)Privacy, (opens new window)License