DateField component for Stripe Apps
Use the DateField component to collect date information from users.
To add the DateField component to your app:
The following shows a preview of a DateField component with a label and a description:
DateField props
| Property | Type |
|---|---|
| Optional
Specifies the initial value that a user can change. |
| Optional
Descriptive text that will be rendered adjacent to the control’s label. |
| Optional
Sets whether or not the element should be disabled. Prevents selection. |
| Optional
Error text that will be rendered below the control. |
| Optional
Visually hides the specified elements. The hidden elements will still be present and visible to screen readers. |
| Optional
Sets whether or not the element is in an invalid state. This is a display-only prop, and will not prevent form submission. |
| Optional
Text that describes the control. Will be both visible and clickable. |
| Optional
An onChange-alike event that fires only when the change results in a valid date. Identical behavior to |
| Optional
The size of the component. |
| Optional
Controls the input’s text. When you pass this prop, you must also pass an |
Size
A DateField at each size will match a TextField at that same size. However, you can’t make a date input wider in the same way that you can TextField.
Error
You can provide an error message to indicate a problem with the date.
Disabled
Disable a DateField if the user shouldn’t modify it.
Hide elements
You can visually hide elements of the DateField component, such as the label or description, while maintaining accessibility for screen readers.
Events
The onChange prop works similarly to a native <input type="date" /> HTML element. It only returns a value when it’s a valid date. This means that the onChange handler won’t be called on every keystroke, and a DateField can’t be a controlled input.
Event props (beginning with on) besides onChange fire independently for each of the three sections of the DateField component: year, month, and day.