Skip to content

InputDate

Status: Stable
Storybook
GitHub

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.

Hero Image
  1. Field: The area or box that holds the input.
  2. Label: The text above the field that describes the information needed.
  3. Placeholder (optional): The gray text in the field that hints at the format of the information required.
  4. Help message (optional): The text below the field that helps a user understand the input and successfully enter a correct value.
  5. Error message (conditional): The text below the input field and the help message shown when an error has occurred.

Examples

Default

Open in Playroom

Error

Open in Playroom

Disabled

Open in Playroom

Design guidelines

InputDate allows numeric characters only

DOUse numeric characters for date inputs.
DON'TUse any letters or special characters for user inputs.

Always include a label

DOInclude a label that is descriptive to educate the user on what information should be entered.
DON'TLeave out a label or make the verbiage confusing.

Use helper text to provide formatting options

DOUse optional helper text when you see fit.
DON'TInclude helper text that is redundant.

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.

Related pages