# @leafygreen-ui/text-input > leafyGreen UI Kit Text Input Latest version **16.2.4** (published 2026-10-02) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @leafygreen-ui/text-input pnpm add @leafygreen-ui/text-input yarn add @leafygreen-ui/text-input bun add @leafygreen-ui/text-input ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 16.2.4 | | Published | 2026-10-02 | | First published | 2020-02-27 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 7 | | Unpacked size | 194.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 274 | | Maintainers | thesonofthomp, shaneeza, stephl3, aitchpgm, hnevins, _tsck | ## Links - npm: https://www.npmjs.com/package/@leafygreen-ui/text-input - Repository: https://github.com/mongodb/leafygreen-ui - Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/text-input - Issues: https://jira.mongodb.org/projects/PD/summary - npm.io page: https://npm.io/package/@leafygreen-ui/text-input ## Dependencies (7) - [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.1 - [@leafygreen-ui/hooks](https://npm.io/package/@leafygreen-ui/hooks.md) ^9.3.2 - [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^4.2.3 - [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.1 - [@lg-tools/test-harnesses](https://npm.io/package/@lg-tools/test-harnesses.md) ^0.3.5 - [@leafygreen-ui/form-field](https://npm.io/package/@leafygreen-ui/form-field.md) ^4.0.10 - [@leafygreen-ui/typography](https://npm.io/package/@leafygreen-ui/typography.md) ^22.2.5 ## Recent versions - 16.2.4 (latest) — 2026-10-02 - 12.1.16 (beta) — 2023-07-26 - 13.0.0-alpha.1 (alpha) — 2023-07-20 - 12.1.13-next.7 (next) — 2023-05-26 - 10.2.0-test.0 (test) — 2022-09-22 - 16.2.3 — 2026-01-21 - 16.2.2 — 2025-11-24 - 16.2.1 — 2025-11-13 - 16.2.0 — 2025-11-06 - 16.1.3 — 2025-10-31 - 16.1.2 — 2025-10-21 - 16.1.1 — 2025-10-14 - 16.1.0 — 2025-10-07 - 16.0.4 — 2025-09-25 - 16.0.3 — 2025-09-10 - … 118 more at https://npm.io/package/@leafygreen-ui/text-input/versions ## README # Text Input ![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/text-input.svg) #### [View on MongoDB.design](https://www.mongodb.design/component/text-input/live-example/) ## Installation ### PNPM ```shell pnpm add @leafygreen-ui/text-input ``` ### Yarn ```shell yarn add @leafygreen-ui/text-input ``` ### NPM ```shell npm install @leafygreen-ui/text-input ``` ## Peer Dependencies | Package | Version | | ------------------------------------ | -------- | | `@leafygreen-ui/leafygreen-provider` | `^1.1.0` | ## Example ```js import TextInput from '@leafygreen-ui/text-input'; const [value, setValue] = useState(''); return ( { /* Something to handle the change event */ }} value={value} /> ); ``` ## Properties | Prop | Type | Description | Default | | ---------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | | `id` | `string` | id associated with the TextInput component. | | | `label` | `string` | Text shown in bold above the input element. | | | `description` | `string` | Text that gives more detail about the requirements for the input. | | | `optional` | `boolean` | Marks the input as optional | `false` | | `disabled` | `boolean` | Disabled the input | `false` | | `onChange` | `function` | The event handler function for the 'onchange' event. Accepts the change event object as its argument and returns nothing. | | | `onBlur` | `function` | The event handler function for the 'onblur' event. Accepts the focus event object as its argument and returns nothing. | | | `placeholder` | `string` | The placeholder text shown in the input field before the user begins typing. | | | `errorMessage` | `string` | Text that gives more detail about the requirements for the input. | `'This input needs your attention'` | | `successMessage` | `string` | Text that indicates that the requirements for the input are met. | `'Success'` | | `state` | `'none'`, `'valid'`, `'error'` | Describes the state of the TextInput element before and after the input has been validated | `'none'` | | `value` | `string` | Sets the HTML `value` attribute. | `''` | | `className` | `string` | Adds a className to the class attribute. | `''` | | `type` | `'email'`, `'password'`, `'search'`, `'text'`, `'url'`, `'tel'`, `'number'` | Sets type for TextInput | `'text'` | | `darkMode` | `boolean` | Determines whether or not the component will appear in dark mode. | `false` | | `sizeVariant` | `'xsmall'`, `'small'`, `'default'`, `'large'`, | Sets the side padding, text size, and input height. | `default` | | `baseFontSize` | `14`, `16` | Determines the base font-size of the component if the sizeVariant prop is set to default | `14` | | ... | native `input` attributes | Any other props will be spread on the root `input` element | | ### Special Case: Aria Labels Either `label` or `aria-labelledby` must be provided a string, or there will be a console error. This is to ensure that screenreaders have a description for what the Text Input does. # Test Harnesses ## getTestUtils() `getTestUtils()` is a util that allows consumers to reliably interact with `LG TextInput` in a product test suite. If the `TextInput` component cannot be found, an error will be thrown. ### Usage ```tsx import TextInput from '@leafygreen-ui/text-input'; import { getTestUtils } from '@leafygreen-ui/text-input/testing'; const utils = getTestUtils(lgId?: string); // lgId refers to the custom `data-lgid` attribute passed to `TextInput`. It defaults to 'lg-text_input' if left empty. ``` #### Single `TextInput` ```tsx import { render } from '@testing-library/react'; import TextInput from '@leafygreen-ui/text-input'; import { getTestUtils } from '@leafygreen-ui/text-input/testing'; ... test('text-input', () => { render(); const { getInput, getInputValue } = getTestUtils(); expect(getInput()).toBeInTheDocument(); expect(getInputValue()).toBe('text input'); }); ``` #### Multiple `TextInput`'s When testing multiple `TextInput`'s it is recommended to add the custom `data-lgid` attribute to each `TextInput`. ```tsx import { render } from '@testing-library/react'; import TextInput from '@leafygreen-ui/text-input'; import { getTestUtils } from '@leafygreen-ui/text-input/testing'; ... test('text-input', () => { render( <> , ); const utilsOne = getTestUtils('text-input-1'); // data-lgid const utilsTwo = getTestUtils('text-input-2'); // data-lgid // First TextInput expect(utilsOne.getInput()).toBeInTheDocument(); expect(utilsOne.getInputValue()).toBe(''); // Second TextInput expect(utilsTwo.getInput()).toBeInTheDocument(); expect(utilsTwo.getInputValue()).toBe('text input'); }); ``` #### TextInput with other LG form elements ```tsx import { render } from '@testing-library/react'; import Toggle from '@leafygreen-ui/toggle'; import { getTestUtils as getToggleTestUtils } from '@leafygreen-ui/toggle/testing'; import TextInput from '@leafygreen-ui/text-input'; import { getTestUtils as getTextInputTestUtils } from '@leafygreen-ui/text-input/testing'; import TextArea from '@leafygreen-ui/text-area'; import { getTestUtils as getTextAreaTestUtils } from '@leafygreen-ui/text-area/testing'; ... test('Form', () => { render(