# UI Components

## VGSTextInput

The `VGSTextInput` component is a secure text input field designed for collecting sensitive data using the VGS Collect SDK. This component provides various features such as masking, validation, and tokenization to ensure the secure handling of sensitive information like payment card details, social security numbers, and more.

### VGSTextInput props

`VGSTextInput` has similar props to native iOS/Android TextField attributes.

The `VGSTextInput` class provides built-in support for input text validation and formatting. You can set pre-defined configuration to each `VGSTextInput` by setting the `type` field.

| **Props**       | **Description**                                                                                                    |
| --------------- | ------------------------------------------------------------------------------------------------------------------ |
| collector       | The `VGSCollect` instance used to register the field.                                                              |
| fieldName       | The `string` name of the field. Should be same as in your Valut Route settings.                                    |
| type            | The `VGSInputType` type of the input field (e.g., 'card', 'cvc', 'expDate', 'text'). Default is 'text'.            |
| mask            | The `string` mask pattern for the input field (e.g., '#### #### #### ####' for card number).                       |
| divider         | The `string` divider to use when replacing non-mask characters on form submission.                                 |
| serializers     | An `VGSSerializer[]` array of serializers for the input field.                                                     |
| validationRules | An `ValidationRule[]` array of rules for the input field. Based on `type` will have predefined values.             |
| placeholder     | The `string` placeholder text for the input field.                                                                 |
| keyboardType    | The keyboard type for the input field(e.g., 'default'                                                              |
| secureTextEntry | The `boolean` value whether the input field should have secure text entry (e.g., for passwords). Default is false. |
| autoCorrect     | The `boolean` value whether the input field should enable auto-correction. Default is false.                       |
| containerStyle  | The `object` style for the container view.                                                                         |
| textStyle       | The `object` style for the text input.                                                                             |
| tokenization    | The `false or TokenizationConfig` tokenization configuration for the input field.                                  |
| onStateChange   | A callback function that is invoked when the input field's state changes.                                          |

## Methods

| **Methods** | **Description**                 |
| ----------- | ------------------------------- |
| focus()     | Focuses the text input field.   |
| blur()      | Unfocuses the text input field. |

### Code example

```javascript
import React from 'react';
import { View } from 'react-native';
import { VGSTextInput, VGSCollect } from '@vgs/collect-react-native';
import type { VGSTextInputState } from '@vgs/collect-react-native';

const MyComponent = () => {
  const collector = new VGSCollect('your-vault-id', 'your-environment');

  const handleStateChange = (state) => {
    console.log('Input state changed:', state);
  };

  return (
    <View>
      <VGSTextInput
        collector={collector}
        fieldName="ssn"
        type="ssn"
        mask="###-##-####"
        placeholder="Enter your SSN"
        onStateChange={handleStateChange}
        secureTextEntry={true}
        autoCorrect={false}
        containerStyle={{ margin: 10 }}
        textStyle={{ fontSize: 18 }}
      />
    </View>
  );
};

export default MyComponent;
```

## VGSTextInputState

The `VGSTextInput` component manages its state internally and provides updates via the onStateChange callback. The state includes information such as:

| **Props**        | **Description**                                                                                                      |
| ---------------- | -------------------------------------------------------------------------------------------------------------------- |
| isValid          | `boolean`: Whether the current input is valid based on the validation rules.                                         |
| isDirty          | `boolean`: Whether the input field has been modified.                                                                |
| isEmpty          | `boolean`: Whether the input field is empty.                                                                         |
| isFocused        | `boolean`: Whether the input field is focused.                                                                       |
| inputLength      | `number`: The length of the current input.                                                                           |
| validationErrors | `string[]`: An array of validation errors.                                                                           |
| fieldName        | `string`: The name of the field.                                                                                     |
| cardBrand        | `string`: The detected card brand (for card type). Available only for valid card numbers.                            |
| cardBin          | `string`: The BIN (Bank Identification Number) of the card (for card type). Available only for valid card numbers.   |
| last4            | `string`: The last 4 digits of the card or SSN (for card or SSN type). Available only for valid card numbers or SSN. |

## VGSCardInput

The `VGSCardInput` component is a version of the `VGSTextInput` component, specifically designed for collecting and handling payment card information. It inherits all the functionality of `VGSTextInput` and provides additional features tailored for card input fields.

### VGSCardInput props

`VGSCardInput` has similar props to `VGSTextInput`. In addition, it detects the credit card brand while the user is typing data and displays the card brand image in the card input. All card brand images are included in the SDK, however you still can set your custom images.

| **Props**    | **Description**                                                  |
| ------------ | ---------------------------------------------------------------- |
| iconWidth    | The `number` width of the card brand icon.                       |
| iconHeight   | The `number` height of the card brand icon.                      |
| iconPadding  | The `number` padding around the card brand icon.                 |
| iconPosition | The `left` or `right` or `none` position of the card brand icon. |
| iconStyle    | The `object` style for the card brand icon.                      |

## VGSCVCInput

The `VGSCVCInput` component is another specialized version of the `VGSTextInput` component, designed for collecting and handling payment card security code information (CVC/CVV). It inherits all the functionality of `VGSTextInput` and provides additional features tailored for card security code input fields.

### VGSCVCInput props

`VGSCVCInput` has similar props to `VGSTextInput`. In addition, it displays a CVC image. The CVC image can change dynamically for a specific card brand (e.g. the CVC image for Amex contains 4 digits).

| **Props**    | **Description**                                                  |
| ------------ | ---------------------------------------------------------------- |
| iconWidth    | The `number` width of the card brand icon.                       |
| iconHeight   | The `number` height of the card brand icon.                      |
| iconPadding  | The `number` padding around the card brand icon.                 |
| iconPosition | The `left` or `right` or `none` position of the card brand icon. |
| iconStyle    | The `object` style for the card brand icon.                      |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.verygoodsecurity.com/vault/developer-tools/vgs-collect/react-native-sdk/ui-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.