Credit Card Input

Credit Card Number Input

Description Label describes input
Role type="text", use inputmode="numeric", pattern="[0-9]*"
Relationships for="input-id" is required in the label
State required
Focus Visibly focusable with the tab key / swipe
Action Standard single line text editing keys

Expiration Date (Month/Year)

Description Label describes input
Role type="text", inputmode="numeric", pattern="[0-9]*"
Relationships for="input-id" is required in the label
State required
Focus Visibly focusable with the tab key
Action Standard single line text editing keys

Native Element

A credit card input should not be a type="number" input because it's not a true integer. Use type="text" and a non-intrusive input mask that doesn't insert obtrusive characters (like underscores).

Description

  • Label inner text should describe the radio input.
  • aria-describedby="description-id" for additional descriptions

Role

  • Indicates it is an input

Relationships

  • for="input-id" connects the input to its label
  • inputmode="numeric" will bring up the number pad on mobile devices
  • pattern="[0-9]*" will not prevent writing incorrect information into the field, but it will prevent submitting the form

State

  • required

Focus

  • Visibly focusable with the tab key / swipe

Actions

  • Standard single line text editing keys

Examples