# Card number

Learn about customisation options for the card number component.

## Styling


```typescript
const cardNumberConfig: CardNumberComponentConfig = {
  formatCardNumber: boolean,
  renderCardBrandSelector: boolean,
  acceptedCardBrands: [],
  validationOnChange: boolean,
  validationOnBlur: boolean,
  showHintIcon: boolean,
  showTooltip: boolean,
  hintIconSrc: string,
  cardCvcComponent: CardCvcComponent,
  cardBrandSelectorComponent: CardBrandSelectorComponent,
  dynamicCardImageComponent: DynamicCardImageComponent,
  inputAttributes: InputAttributes,
  required: boolean,
  placeholder: string,
  componentStyles: {
    base: CSSProperties,
    valid: CSSProperties,
    invalid: CSSProperties,
    input: CSSProperties
  },
  inputStyles: {
    base: CSSProperties,
    valid: CSSProperties,
    invalid: CSSProperties
  },
  label: string,
  labelStyles: {
    base: CSSProperties,
    valid: CSSProperties,
    invalid: CSSProperties
  },
  labelPosition: string,
  invalidTextStyles: CSSProperties,
  invalidTextPosition: string,
  guideText: string,
  validations: {},
  invalidIconSrc: string,
  validIconSrc: string,
  displayValidIcon: boolean,
  displayInvalidIcon: boolean,
  tooltipAriaLabel: string,
  ariaLabel: string,
  displayRequiredIcon: boolean,
  allowToCopyPaste: boolean,
  validationOnBlur: boolean,
  validationOnChange: boolean,
  tabIndex: number
};
```

| Property | Description |
|  --- | --- |
| `formatCardNumber`boolean | Whether to auto-format the number as typed. |
| `renderCardBrandSelector`boolean | Whether to render the card brand drop-down. |
| `acceptedCardBrands`CardBrands[] | The list of accepted card brands. |
| `validationOnChange`boolean | Whether to validate on input change. |
| `validationOnBlur`boolean | Whether to validate on input blur. |
| `showHintIcon`boolean | Whether to display a hint icon. |
| `hintIconSrc`string | The URL to your custom hint icon. |
| `showTooltip`boolean | Whether to show a tooltip when hovering over the hint. |
| `cardCvcComponent`CardCvcComponent | Configuration for the CVC component. See [Card CVC](/guides/components/web/card/card-cvc). |
| `cardBrandSelectorComponent`CardBrandSelectorComponent | Configuration for the card brand selector component. See [Card brand selector](/guides/components/web/card/card-brand-selector). |
| `dynamicCardImageComponent`DynamicCardImageComponent | Component to display dynamic card images. See [Dynamic card image](/guides/components/web/card/dynamic-card-image). |
| `inputAttributes`InputAttributes | Additional HTML input attributes. |
| `required`boolean | Whether the field is required for submission. |
| `placeholder`string | The placeholder text to display when the field is empty. |
| `componentStyles`ComponentStyles | Custom styling for the component. |
| `componentStyles.base`CSSProperties | Base styling for the component. |
| `componentStyles.valid`CSSProperties | Styling for the component when it's valid. |
| `componentStyles.invalid`CSSProperties | Styling for the component when it's not valid. |
| `componentStyles.input`CSSProperties | Styling for the input element. |
| `inputStyles`StateStyles | Style for input field in various states. |
| `label`string | The input label's text. |
| `labelStyles`StateStyles | The label styling, based on the state. |
| `labelPosition`string (enum) | The position of the label, relative to the input field.Possible values:`above``below``left``right` |
| `invalidTextStyles`CSSProperties | Styling for the validation message text. |
| `invalidTextPosition`string (enum) | The position of the invalid text message, relative to the input field.Possible values:`above``below``left``right` |
| `guideText`string | The helper text to display below the input field. |
| `validations`T | Validation rules to be applied to the input field. |
| `invalidIconSrc`string | The URL for the icon shown on invalid input. |
| `validIconSrc`string | The URL for the icon shown on valid input. |
| `displayValidIcon`boolean | Whether to display a success icon. Defaults to `true`. |
| `displayInvalidIcon`boolean | Whether to display an error icon. Defaults to `true`. |
| `tooltipAriaLabel`string | The aria label for the tooltip. |
| `ariaLabel`string | The aria label for the field component. |
| `displayRequiredIcon`boolean | Whether to display a required icon. Defaults to `true`. |
| `allowToCopyPaste`boolean | Whether to allow copy/paste in the input fields. |
| `validationOnBlur`boolean | Whether to run validation when input loses focus. |
| `validationOnChange`boolean | Whether to run validation as a value changes. |
| `tabIndex`number | The tab index of the input element. |


## Callbacks


```typescript
const cardCvcConfig: CardCvcComponentConfig = {
  onChange: (event: InputEvent) => void,
  onFocus: (event: FocusEvent) => void,
  onBlur: (event: FocusEvent) => void,
  onValidationPassed: (data: ValidationResult[]) => void,
  onValidationFailed: (data: ValidationResult[]) => void,
  onCardBrandDetected?: (event: Event) => void,
  onCardBrandCannotRecognised?: (event: Event) => void
};
```

| Callback | Description |
|  --- | --- |
| `onChange: (event: InputEvent) => void` | Event handler for when the input value changes. |
| `onFocus: (event: FocusEvent) => void` | Event handler for when the input receives focus. |
| `onBlur: (event: FocusEvent) => void` | Event handler for when the input loses focus. |
| `onValidationPassed: (data: ValidationResult[]) => void` | Event handler for when all validations pass. |
| `onValidationFailed: (data: ValidationResult[]) => void` | Event handler for when any validation fails. |
| `onCardBrandDetected: (event: Event) => void` | Event handler for when a card brand is detected. |
| `onCardBrandCannotRecognised: (event: Event) => void` | Event handler for when a card brand can't be recognised. |


For more information about callbacks, see [Events](/guides/components/web/card/events).

## Example


```typescript
const cardNumberConfig: CardNumberComponentConfig = {
  label: "Card number",
  placeholder: "1234 5678 9012 3456",
  required: true,
  formatCardNumber: true,
  renderCardBrandSelector: true,
  showHintIcon: true,
  showTooltip: true,
  validationOnChange: true,
  validationOnBlur: true,
  acceptedCardBrands: ["Visa", "MasterCard", "Amex"],
  inputStyles: {
    base: {
      border: "1px solid #ccc",
      padding: "12px",
      borderRadius: "4px",
      fontSize: "16px"
    },
    valid: {
      borderColor: "#28a745"
    },
    invalid: {
      borderColor: "#dc3545"
    }
  },
  labelStyles: {
    base: {
      fontWeight: "500",
        marginBottom: "8px"
    }
  },
  tabIndex: 1,
  onChange: (event) => {
    console.log("Card number changed:", event.target.value);
  },
  onFocus: (event) => {
    console.log("Card number focused");
  },
  onBlur: (event) => {
    console.log("Card number blurred");
  },
  onValidationPassed: (data) => {
    console.log("Card number valid");
  },
  onValidationFailed: (data) => {
    console.log("Card number validation failed:", data);
  },
  onCardBrandDetected: (event) => {
    console.log("Card brand detected:", event);
  },
  onCardBrandCannotRecognised: (event) => {
    console.log("Card brand not recognised:", event);
  }
};
```