> ## Documentation Index
> Fetch the complete documentation index at: https://developer.tazapay.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Input Styles

## Input Field Styling (only for Card Form)

We provide plenty of styling options for the Input fields

```json Style Object expandable theme={null}
style: {
  "input-base_margin": "0px 0px 0px 0px !important",
  "input-base_padding": "20px",
  "input-base_outline": "none",
  "input-base_borderWidth": "0px",
  "input-base_borderColor": "black",
  "input-base_borderStyle": "solid",
  "input-base_borderRadius": "5px",
  "input-base_width": "100%",
  "input-base_height": "45px",
  "input-base_fontFamily": "Arial, sans-serif",
  "input-base_fontSize": "14px",
  "input-base_fontWeight": "600",
  "input-base_color": "black",
  "input-base_background": "white",
  "input-base_boxShadow": "0px 0px 2px 0px #80808080 inset",
  "input-base_boxSizing": "border-box",
}
```

You can also use above styling options for various input field states like focus and error. These style properties can also be used for the validation error message shown below input fields.

```json Style Object theme={null}
style: {
  "input-focus_borderColor": "blue",
  "input-error_borderColor": "red",
  "inputErrorMessage_color": "red",
}
```

You can even style the placeholder.

```json Style Object theme={null}
style: {
  "input-placeholder_fontFamily": "Arial, sans-serif",
  "input-placeholder_fontSize": "14px",
  "input-placeholder_fontWeight": "400",
  "input-placeholder_color": "darkgray",
}
```

Below options can be used to style the card form.

```json Style Object theme={null}
style: {
  "card-input_gap": "0.5rem",
  "cardInputLogo_height": "3rem",
  "cardInputLogo_width": "3rem",
  "cardInputLogo_padding": "0.6rem",
}
```