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" }
};