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.