Skip to main content

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

NameTypeDescription
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" }}
namestringThe 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()?() => voidCallback fired when the input loses focus. Useful for validation or form state management.
onChange()?() => voidCallback fired when the input change event is triggered. Note: The actual value is not accessible due to security isolation.
onFocus()?() => voidCallback fired when the input receives focus. Useful for managing form state or UI feedback.
onInput()?() => voidCallback 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" }
};