TypeAlias.KeybanInputProps
type KeybanInputProps = BaseProps & {
inputStyles?: Pick<{ [K in keyof React.CSSProperties]: string }, "colorScheme" | "backgroundColor" | "color" | "fontSize" | "textAlign">;
name: string;
onBlur?: () => void;
onChange?: () => void;
onFocus?: () => void;
onInput?: () => void;
};
Props for the KeybanInput component.
Type declaration
Name | Type | Description |
---|---|---|
inputStyles? | Pick <{ [K in keyof React.CSSProperties]: string } , "colorScheme" | "backgroundColor" | "color" | "fontSize" | "textAlign" > | Styling options for the input element inside the iframe. Limited to specific CSS properties for security reasons. Example inputStyles={{ textAlign: "center", fontSize: "16px", color: "#333" }} |
name | string | The name attribute for the input, used to identify the input in form submissions. This is required and should be unique within the form context. Example "email", "password", "otp", "phone" |
onBlur()? | () => void | Callback fired when the input loses focus. Useful for validation or form state management. |
onChange()? | () => void | Callback fired when the input change event is triggered. Note: The actual value is not accessible due to security isolation. |
onFocus()? | () => void | Callback fired when the input receives focus. Useful for managing form state or UI feedback. |
onInput()? | () => void | Callback fired when the input value changes. Note: The actual value is not accessible due to security isolation. |
Example
const props: KeybanInputProps = {
name: "email",
type: "email",
onFocus: () => console.log("focused"),
inputStyles: { textAlign: "center" }
};