| Name | Description | Default | Type |
|---|---|---|---|
onChange* | | (value: string) => void | |
additionalInfo | Pass a heading and content to show additional information on the field. | | { content: string | Element; heading: string;} |
className | Additional CSS classes. | | string |
disabled | Disable the control. The browser defaults to false. | | boolean |
id | Sets DOM id for the control and associates label element via 'for' attribute. If an id is not pass, a random id will be generated for any render. | | string |
info | It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. | | ReactNode |
label | Pass a string or a fragment with an Icon and string. | | ReactNode |
labelHidden | Visually hides the label region. | false | boolean |
name | Sets html name attribute for the underlying control. Useful for mapping to a data field. | | string |
onBlur | | (value: string) => void | |
onFocus | | (value: string) => void | |
placeholder | Placeholder text. The browser defaults to an empty string. | | string |
readOnly | Makes the component non editable and non clickable. The browser defaults to false. | | boolean |
ref | Ref for the wrapping element. | | Ref<HTMLInputElement> |
required | Indicate if the field is required. The browser defaults to false. | | boolean |
status | Set visual state based on a validation state. | | 'error' |'pending' |'success' |'warning' |
value | CurrencyInput input value. Requires an onChange handler to update value. | '' | string |
CreditCardInput
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
CreditCardInputs auto-format a credit card number based on the card type. This component only accepts numeric input.
Usage
The formatting for the value entered within the CreditCardInput (e.g., spaces) will be applied as a user types. The component also allows for standard Form Field structures such as being set required, disabled, or readOnly, as well as including a label, status, or info.
If there is a label and the Field is not disabled, passing an object to the additionalInfo prop that includes a heading and content will provide the user with more useful information on the Field when they click on the associated information Icon.