# Expiration date input Drop
Include the Moov expiration date input Drop with the Moov form Drop to securely and seamlessly submit sensitive card data to Moov.
Combine the `moov-expiration-date-input` element with the `moov-form` to submit sensitive card data to Moov. With the `moov-expiration-date-input` element, information entered by the user is captured by iframes and hidden from the customer’s website.
Expiration date
```html
```
Moov Drops require a secure HTTPS connection. If you don't have a test environment with HTTPS enabled, we suggest setting up a hosting environment with ngrok, Netlify, or Vercel.
## [Properties](#properties)
Properties can be accessed through JavaScript using a reference to the `moov-expiration-date-input` element.
| Property | Type | Required | Description |
|---------------------|----------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `name` | String | **✓** | The name of the input. The input value is merged into the request body using this name. For example, the input name `name.first` would result in a request body of `{ name: { first: "inputValue" } }`. |
| `formName` | String | **✓** | The name of the form to which this text input is registered. |
| `disabled` | Boolean | | If `true`, this input is disabled, preventing user input. |
| `required` | Boolean | | If `true`, this input is required for form submission. |
| `readOnly` | Boolean | | If `true`, the input value cannot be edited by a user. |
| `size` | Number | | Expected number of characters in this input. |
| `inputStyle` | Object | | A record of camelCased CSS variables, passed to the input element within the iframe. For developer convenience, inheritable styles such as color, font-size, and font-family are applied automatically. |
| `validationMessage` | String | | Read only. The human-readable message displayed to the user when this input is invalid. |
| `validity` | Object | | Read only. A `ValidityState` object. Details whether or not the input is valid and which validations (if any) are passing. |
| `willValidate` | Boolean | | Read only. Returns true if this input has any attached validators. |
| `onInput` | Function | | Fired when the user changes the input value. No arguments. |
| `onChange` | Function | | Fired when the user navigates away from the input. No arguments. |
| `onFocus` | Function | | Fired when the user focuses the input. No arguments. |
| `onBlur` | Function | | Fired when the input loses focus. No arguments. |
| `onInvalid` | Function | | Fired when the input fails a validation check. |
| `onEnterKeyPress` | Function | | Fired when the user presses the enter key while focusing the input. |
| `onCheckValidity` | Function | | Fired after a validity check runs on the input. Passes `isValid` as an argument. |
| `onReportValidity` | Function | | Fired after a validity report runs on the input. Passes `isValid` as an argument. |
### [How to set a property](#how-to-set-a-property)
[name](#tab-237864951-4-0) [inputStyle](#tab-237864951-4-1) [onBlur](#tab-237864951-4-2) [onInvalid](#tab-237864951-4-3)
```javascript
const input = document.querySelector('moov-expiration-date-input');
input.name = 'demoInput';
```
```javascript
const input = document.querySelector('moov-expiration-date-input');
input.inputStyle = {
fontSize: "14px",
color: "blue",
};
```
```javascript
const input = document.querySelector('moov-expiration-date-input');
const blurCallback = (brandName) => {
// Input lost focus
};
input.onBlur = blurCallback;
```
```javascript
const input = document.querySelector('moov-expiration-date-input');
const invalidCallback = () => {
// The input failed validation
console.error(input.validationMessage);
};
input.onInvalid = invalidCallback;
```
## [Methods](#methods)
You can call the methods of `moov-expiration-date-input` to perform various actions.
| Method | Description | Parameters | Returns |
|---------------------|---------------------------------------------------------------------------------------------------------|---------------------------|---------|
| `blur` | Removes focus from the input. | None | None |
| `click` | Imitates a user click on the input. | None | None |
| `focus` | Focuses the input. | None | None |
| `select` | Selects the input. | None | None |
| `setCustomValidity` | Overrides the `validityMessage` on the input. | `validityMessage`: String | None |
| `checkValidity` | Runs a validity check on the input. | None | None |
| `reportValidity` | Runs a validity check on the input and reports the result to the user through browser default behavior. | None | None |
### [How to call a method](#how-to-call-a-method)
[focus](#tab-341258697-6-0) [validate](#tab-341258697-6-1)
```javascript
const input = document.querySelector('moov-expiration-date-input');
input.focus();
```
```javascript
const input = document.querySelector('moov-expiration-date-input');
input.checkValidity();
// Use onCheckValidity for the result
```