diff --git a/docusaurus/docs/date-picker/input-date-picker.md b/docusaurus/docs/date-picker/input-date-picker.md
index 74a1eadd..baa949a6 100644
--- a/docusaurus/docs/date-picker/input-date-picker.md
+++ b/docusaurus/docs/date-picker/input-date-picker.md
@@ -91,13 +91,21 @@ Limits which dates the user can navigate to and where events can go. Dates outsi
`Type: boolean | undefined`
Flag indicating if the date format should be inside the components label.
+**withModal**
+`Type: boolean | undefined`
+Flag indicating if the `datepicker` component is available from the input.
+
**hasError**
`Type: boolean | undefined`
-Flag indicating if the the component should display error styles.
+Flag indicating if the component should display error styles.
**hideValidationErrors**
`Type: boolean | undefined`
-Flag indicating if the the component should hide error styles along with the `helperText` component displaying the error message.
+Flag indicating if the component should hide error styles along with the `helperText` component displaying the error message.
+
+**showHelperTextOnError**
+`Type: boolean | undefined`
+Flag indicating if the `helperText` component should be hidden if there is an error or always (hide empty line caused by empty`helperText` component).
**onValidationError**
`Type: Function | undefined`
@@ -128,7 +136,7 @@ Flag indicating if the component should be enabled or not. Behavior similarly to
Flag indicating if the status bar padding should be enabled or not. Defaults to `false`.
**presentationStyle**
-`Type: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'`
+`Type: ''pageSheet' | 'overFullScreen'`
Determines the visual presentation style of the date picker modal. This prop allows you to define how the modal appears on the screen when it is displayed.
- `'fullScreen'`: Presents the modal as a full-screen overlay.
diff --git a/src/Date/DatePickerInput.shared.tsx b/src/Date/DatePickerInput.shared.tsx
index 44b71df0..46c65c1b 100644
--- a/src/Date/DatePickerInput.shared.tsx
+++ b/src/Date/DatePickerInput.shared.tsx
@@ -11,6 +11,7 @@ export type DatePickerInputProps = {
withModal?: boolean
withDateFormatInLabel?: boolean
hideValidationErrors?: boolean
+ showHelperTextOnError?: boolean
hasError?: boolean
onValidationError?: ((error: string | null) => void) | undefined
calendarIcon?: string
diff --git a/src/Date/DatePickerInputWithoutModal.tsx b/src/Date/DatePickerInputWithoutModal.tsx
index d86d6ef8..bada81db 100644
--- a/src/Date/DatePickerInputWithoutModal.tsx
+++ b/src/Date/DatePickerInputWithoutModal.tsx
@@ -18,6 +18,7 @@ function DatePickerInputWithoutModal(
withDateFormatInLabel = true,
hasError,
hideValidationErrors,
+ showHelperTextOnError,
onValidationError,
modal,
inputButton,
@@ -100,11 +101,13 @@ function DatePickerInputWithoutModal(
inputButton={inputButton}
/>
- {error && !hideValidationErrors ? (
-
- {error}
-
- ) : null}
+ {!!!showHelperTextOnError || !!hasError ? (
+ !hideValidationErrors ? (
+
+ {error}
+
+ ) : null
+ ): null}
{modal?.({
value,
@@ -140,8 +143,6 @@ function getLabel({
const styles = StyleSheet.create({
root: {
- flex: 1,
- flexGrow: 1,
justifyContent: 'center',
alignItems: 'flex-start',
width: '100%',