The InputDate field is a form element containing a label and a date input field with an optional placeholder attribute. The date input field is restricted to numeric characters only.

- Field: The area or box that holds the input.
- Label: The text above the field that describes the information needed.
- Placeholder (optional): The gray text in the field that hints at the format of the information required.
- Help message (optional): The text below the field that helps a user understand the input and successfully enter a correct value.
- Error message (conditional): The text below the input field and the help message shown when an error has occurred.
Examples
Default
Error
Disabled
Design guidelines
InputDate allows numeric characters only


Always include a label


Use helper text to provide formatting options


Props
<InputDate>
defaultValue
string | number
value
string | number
label
string
A label for the input
style
Deprecated
CSSProperties
className
string
Class on outer container element
id
string
ID for the input element.
placeholder
string
inputMode
"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"
Hints at the type of data that might be entered by the user while editing the element or its contents
onFocus
FocusEventHandler<T>
onBlur
FocusEventHandler<T>
onChange
ChangeEventHandler<T>
name
string
disabled
boolean
autoComplete
string
maxLength
number
required
boolean
error
boolean
Flag to indicate if input is in an error (red outline) state. Use in conjunction with errorMessage to display a red error message.
fullWidth
boolean
feedbackMessages
Array<{
feedbackType: "error" | "info" | "success"
message: string
id?: string
}>A list of feedback messages to show for the group.
helpMessage
ReactNode
Optional help text shown below the input
errorMessage
ReactNode
Red text to be shown indicating the user is in an error state.
tooltip
ReactNode
Optional tooltip shown via an icon next to the label
tooltipPlacement
"bottom" | "left" | "right" | "top"
Positioning of tooltip
inputRef
(instance: HTMLInputElement | null) => void | RefObject<HTMLInputElement>
Gives access to the input DOM node.