# @synerise/ds-input
> Input UI Component for the Synerise Design System
Latest version **2.0.6** (published 2026-09-22) · ISC license · 0 weekly downloads
## Install
```sh
npm install @synerise/ds-input
pnpm add @synerise/ds-input
yarn add @synerise/ds-input
bun add @synerise/ds-input
```
## Health
**Score 55/100 (C)** — status: active.
Positive: no vulnerabilities; recently updated; high maintenance score.
Warnings: low downloads; no types; no esm support.
## Facts
| | |
|---|---|
| Version | 2.0.6 |
| Published | 2026-09-22 |
| First published | 2019-09-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | synerise |
## Links
- npm: https://www.npmjs.com/package/@synerise/ds-input
- Repository: synerise/synerise-design
- npm.io page: https://npm.io/package/@synerise/ds-input
## Recent versions
- 2.0.6 (latest) — 2026-09-22
- 2.0.5 — 2026-09-18
- 2.0.4 — 2026-09-16
- 2.0.3 — 2026-09-08
- 2.0.2 — 2026-09-07
- 2.0.1 — 2026-09-02
- 2.0.0 — 2026-08-26
- 1.8.2 — 2026-08-18
- 1.8.1 — 2026-08-14
- 1.8.0 — 2026-08-11
- 1.7.14 — 2026-07-24
- 1.7.13 — 2026-07-23
- 1.7.12 — 2026-07-09
- 1.7.11 — 2026-06-17
- 1.7.10 — 2026-06-11
- … 369 more at https://npm.io/package/@synerise/ds-input/versions
## README
---
id: input
title: Input
---
Input UI Component
## Input
## Textarea
## API
### Input
| Property | Description | Type | Default |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ----------- |
| addonAfter | The label text displayed after (on the right side of) the input field. | string\|ReactNode | |
| addonBefore | The label text displayed before (on the left side of) the input field. | string\|ReactNode | |
| allowClear | Allow to remove input content with clear icon | boolean | |
| counterLimit | Maximum input length, if provided counter will be shown; input is blocked at the limit | number | - |
| renderCustomCounter | render function to display custom char counter instead of counterLimit. counterLimit (max allowed chars) does not have to be defined. | `(count?: number) => ReactNode` | - |
| defaultValue | The initial input content | string | |
| description | input description | string | - |
| disabled | Whether the input is disabled. | boolean | `false` |
| errorText | Error message, if provided input will be set in error state | string | - |
| error | If provided input will be set in error state, without error message | boolean | - |
| expandable | If true then user can switch to a multiline field if text overflows the input | boolean | - |
| expandableTooltip | Tooltip shown on the expand icon | ReactNode | - |
| handleInputRef | Callback receiving a ref to the underlying `` element after mount. | `(ref: MutableRefObject) => void` | - |
| icon1 | Left action icon rendered inside the input (right side) | ReactElement | - |
| icon1Tooltip | Tooltip for icon1 | ReactElement | - |
| icon2 | Second action icon (stacks with icon1) | ReactElement | - |
| icon2Tooltip | Tooltip for icon2 | ReactElement | - |
| id | The ID for input | string | |
| label | Input label | string | - |
| onChange | Callback when user input | function(e) | |
| onPressEnter | The callback function that is triggered when Enter key is pressed. | function(e) | |
| prefix | The prefix icon for the Input. | string\|ReactNode | |
| prefixel | Attached left addon block (height matched to input height) | ReactNode | - |
| resetMargin | Whether input should have margin reset | boolean | - |
| size | The size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` | string | `default` |
| suffix | The suffix icon for the Input. | string\|ReactNode | |
| suffixel | Attached right addon block (height matched to input height) | ReactNode | - |
| tooltip | Tooltip content | ReactNode | - |
| tooltipConfig | Config of tooltip | [TooltipProps](https://design.synerise.com/docs/components/tooltip#api) | - |
| type | The type of input, see: [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)(use `Input.TextArea` instead of `type="textarea"`) | string | `text` |
| value | The input content value | string | |
| autoResize | 'resize' width of the input based on width of the text in input | AutoResizeProp (see below) | `undefined` |
| autoResizeProps | Fine-tuning options for autoResize: `placeholderIsMinWidth`, `wrapperClassName`, `wrapperStyle`, `extraWidth` | `Partial` | - |
#### AutoResizeProp
```
type AutoResizeProp = boolean | {
minWidth: string;
maxWidth?: string;
stretchToFit?: boolean
};
```
Setting `stretchToFit: true` will make the field stretch to fit the containing element. The component observes the width of the wrapper and adjusts the maxWidth accordingly.
**Important** if the Input is within a flex-item then there is necessary CSS that needs to be applied to the flex-item containers in order for the flex-item to grow to fill the allowed space, but at the same time not stretch the flex container (identical issue happens when text-overflow needs to happen inside a flex-item).
```css
$flexItemSurroundingTheInput {
min-width: 0;
flex-grow: 1;
}
```
See https://css-tricks.com/flexbox-truncated-text/ for more details.
### InputGroup
| Property | Description | Type | Default |
| ------------- | ------------------------------------------------------------------------------------------------------- | ------------ | --------- |
| compact | Whether use compact style | boolean | `false` |
| size | The size of Input.Group specifies the size of the included Input fields. Available: large default small | string | `default` |
| errors | Array of error messages displayed below the group | string[] | - |
| resetMargin | Whether input group should have margin reset | boolean | - |
| label | Group label | ReactNode | - |
| description | Helper text below the group | string | - |
| tooltip | Tooltip content on the label | ReactNode | - |
| tooltipConfig | Config of tooltip | TooltipProps | - |
### TextArea
| Property | Description | Type | Default |
| ------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------- | ------- |
| autoSize | Autosizing the height to fit the content | `{ minRows: number; maxRows: number; }` | - |
| counterLimit | Maximum input length, if provided counter will be shown | number | - |
| renderCustomCounter | Render function to display custom char counter | `(count?: number) => ReactNode` | - |
| description | Helper text below the textarea | string | - |
| errorText | Error message, if provided textarea will be set in error state | string\|ReactNode | - |
| error | If provided textarea will be set in error state, without error message | boolean | - |
| handleInputRef | Callback receiving a ref to the underlying `