# @lg-chat/input-bar > lg-chat Input Bar Latest version **12.2.3** (published 2026-10-02) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @lg-chat/input-bar pnpm add @lg-chat/input-bar yarn add @lg-chat/input-bar bun add @lg-chat/input-bar ``` ## 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 | 12.2.3 | | Published | 2026-10-02 | | First published | 2024-03-14 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 19 | | Unpacked size | 284.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 274 | | Maintainers | aitchpgm, stephl3, thesonofthomp, _tsck, shaneeza | ## Links - npm: https://www.npmjs.com/package/@lg-chat/input-bar - Repository: https://github.com/mongodb/leafygreen-ui - Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/chat/input-bar - Issues: https://jira.mongodb.org/projects/LG/summary - npm.io page: https://npm.io/package/@lg-chat/input-bar ## Dependencies (19) - [lodash](https://npm.io/package/lodash.md) ^4.17.21 - [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.1 - [@leafygreen-ui/icon](https://npm.io/package/@leafygreen-ui/icon.md) ^14.9.1 - [@leafygreen-ui/hooks](https://npm.io/package/@leafygreen-ui/hooks.md) ^9.3.2 - [@leafygreen-ui/avatar](https://npm.io/package/@leafygreen-ui/avatar.md) ^3.3.1 - [@leafygreen-ui/banner](https://npm.io/package/@leafygreen-ui/banner.md) ^10.2.6 - [@leafygreen-ui/button](https://npm.io/package/@leafygreen-ui/button.md) ^25.2.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 - [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.3 - [@leafygreen-ui/popover](https://npm.io/package/@leafygreen-ui/popover.md) ^14.3.3 - [react-textarea-autosize](https://npm.io/package/react-textarea-autosize.md) ^8.5.9 - [@leafygreen-ui/typography](https://npm.io/package/@leafygreen-ui/typography.md) ^22.2.5 - [@leafygreen-ui/icon-button](https://npm.io/package/@leafygreen-ui/icon-button.md) ^17.1.6 - [@leafygreen-ui/polymorphic](https://npm.io/package/@leafygreen-ui/polymorphic.md) ^3.1.1 - [@leafygreen-ui/input-option](https://npm.io/package/@leafygreen-ui/input-option.md) ^4.1.6 - [@leafygreen-ui/search-input](https://npm.io/package/@leafygreen-ui/search-input.md) ^6.1.4 - [react-keyed-flatten-children](https://npm.io/package/react-keyed-flatten-children.md) ^1.3.0 - [@leafygreen-ui/compound-component](https://npm.io/package/@leafygreen-ui/compound-component.md) ^0.3.1 ## Recent versions - 12.2.3 (latest) — 2026-10-02 - 12.2.2 — 2026-01-22 - 12.2.1 — 2026-01-21 - 12.2.0 — 2025-12-31 - 12.1.1 — 2025-12-17 - 12.1.0 — 2025-11-26 - 12.0.1 — 2025-11-24 - 12.0.0 — 2025-11-13 - 11.0.2 — 2025-11-07 - 11.0.1 — 2025-10-31 - 11.0.0 — 2025-10-21 - 10.1.0 — 2025-09-29 - 10.0.5 — 2025-09-25 - 10.0.4 — 2025-09-10 - 10.0.3 — 2025-09-03 - … 37 more at https://npm.io/package/@lg-chat/input-bar/versions ## README # Input Bar ## Installation ### PNPM ```shell pnpm add @g-chat/input-bar ``` ### Yarn ```shell yarn add @lg-chat/input-bar ``` ### NPM ```shell npm install @lg-chat/input-bar ``` ## Example ```tsx import { useState } from 'react'; import { InputBar, State } from '@lg-chat/input-bar'; const Example = () => { const [state, setState] = useState(State.Unset); const handleMessageSend = (messageBody: string) => { console.log('Sending:', messageBody); setState(State.Loading); // Simulate API call }; const handleClickStopButton = () => { console.log('Stopping request'); setState(State.Unset); // Cancel your API request here }; return ( ); }; ``` ### Compound Components #### InputBar.AdditionalActions ```tsx import { useState } from 'react'; import { InputBar, State } from '@lg-chat/input-bar'; import { Button } from '@leafygreen-ui/button'; const Example = () => { const [state, setState] = useState(State.Unset); const handleMessageSend = (messageBody: string) => { console.log('Sending:', messageBody); setState(State.Loading); // Simulate API call }; return ( ); }; ``` ## Properties ### InputBar | Prop | Type | Description | Default | | ------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------- | | `darkMode` | `boolean` | Determines if the component will render in dark mode | `false` | | `disabled` | `boolean` | Determines whether the user can interact with the InputBar | `false` | | `disableSend` | `boolean` | When defined as `true`, disables the send action and button | | | `errorMessage` | `ReactNode` | Custom error message to display when `state='error'` | | | `onClickStopButton` | `() => void` | Callback fired when the stop button is clicked during a loading state. Restores the previous message body. | | | `onMessageSend` | `(messageBody: string, e?: FormEvent) => void` | Callback fired when the user sends a message. | | | `textareaProps` | `TextareaAutosizeProps` | Props passed to the TextareaAutosize component. | | | `textareaRef` | `RefObject` | Ref object to access the textarea element directly | | | `state` | `'unset' \| 'error' \| 'loading'` | The current state of the InputBar. | | | `...` | `HTMLElementProps<'form'>` | Props spread on the root element | | ### InputBar.AdditionalActions | Prop | Type | Description | Default | | ---------- | ------------------------- | ----------------------------------------------------------------------------------------------- | ------- | | `children` | `ReactNode` | Content to render in the additional actions container. Appears to the left of send/stop button. | | | `...` | `HTMLElementProps<'div'>` | Props spread on the container div element | | ### TextareaAutosizeProps | Prop | Type | Description | Default | | --------- | -------- | --------------------------------- | ------- | | `maxRows` | `number` | maximum number of rows to display | 14 | | `minRows` | `number` | minimum number of rows to display | 1 | [See react-textarea-autosize docs for more props](https://github.com/Andarist/react-textarea-autosize?tab=readme-ov-file#special-props) --- _Source: https://npm.io/package/@lg-chat/input-bar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._