@synerise/ds-input v0.21.1
id: input
title: Input
Input UI Component
Input
Textarea
MaskedInput
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 | number | - |
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 | - |
handleInputRef | The callback function that is triggered when Component is mounted. | function(ref) | - |
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 | |
resetMargin | Whether input should have margin reset | boolean | - |
resize | 'resize' CSS property passed to the input component | none / both / horizontal / vertical / initial / inherit | - |
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 | |
tooltip | Tooltip content | ReactNode | - |
tooltipConfig | Config of tooltip | TooltipProps | - |
type | The type of input, see: MDN(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 |
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).
$flexItemSurroundingTheInput {
min-width: 0;
flex-grow: 1
}
See https://css-tricks.com/flexbox-truncated-text/ for more details.
MaskedInput
Same as Input api with additional props:
Property | Description | Type | Default |
---|---|---|---|
mask | The masking pattern to be applied to the input | string (https://github.com/insin/inputmask-core#pattern) | - |
placeholderChar | Customized placeholder character used to fill in editable parts of the pattern. | string | '_' |
formatCharacters | Customized format character definitions for use in the pattern. | Object (https://github.com/insin/inputmask-core#formatcharacters) | - |
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 |
TextArea
Property | Description | Type | Default |
---|---|---|---|
autoSize | Autosizing the height to fit the content | { minRows: number; maxRows: number; } | - |
errorText | Error message, if provided textarea will be set in error state | string | - |
error | If provided textarea will be set in error state, without error message | boolean | - |
resize | 'resize' CSS property passed to the textarea component | none / both / horizontal / vertical / initial / inherit | - |
wrapperStyle | CSS properties passed to the textarea component wrapper | React.CSSProperties | - |
2 days ago
2 days ago
10 days ago
25 days ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
8 months ago
8 months ago
6 months ago
6 months ago
8 months ago
8 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
9 months ago
10 months ago
9 months ago
9 months ago
8 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago