Long story short: I need some mandatory date picker component (for an expiration date of a certificate) which can be made optional by an active click from the user (if the certificate is valid permanently). What may be a good design for this such that
- the dichotomy between "pick an expiration date" and "select "No expiration date" is clear,
- by default, we assume that the user will pick an expiration date (i.e. if not, he has to do an active click),
- no custom date picker is required.
More detailed description:
- Left picture: In my webapp, a user can create a profile of himself - for this, he can also choose a certificate he has and assign it with its profile. In order to do this, he has to choose the certificate from a list and then enter the issue date, the expiration date and upload a reference. All of these input fields are mandatory.
- Middle and right picture: Now there are also certificates without expiration date, so the user should have also the option to mark some (lifelong) certificate with "No expiration date". Some day the design for this has been chosen like this (middle/right picture).
However, this implementation looks a little unattractive: a positive entry (activate checkbox) leads to a negative action (date picker is deactivated).
I am therefore looking for a better solution.One idea would be to replace the "Expiry date" label above the corresponding date picker with a checkbox with label but I'm unsure if this solution misuses a checkbox as a label.
What alternative designs are there for this purpose, to make the date picker for the expiration date "on request" optional?
It is very important to minimize the risk that a temporary certificate is inadvertently created as permanent, hence simply making the expiration date field optional is out of the question - the user must actively deactivate it in some way (and must not simply forget it under any circumstances). Additionally I'd prefer to use the native browser date picker and avoid manually creating my own input component that accepts both inputs (date or "no expiration date").