Function Group

components/base/input/pin-input.tsx:67–84

({ inputClassName, containerClassName, width, maxLength = 4, ...props }: GroupProps)

};

const Group = ({ inputClassName, containerClassName, width, maxLength = 4, ...props }: GroupProps) => {
    const { id, size, disabled } = usePinInputContext();

    return (
        <OTPInput
            {...props}
            size={width}
            maxLength={maxLength}
            disabled={disabled}
            id={"pin-input-" + id}
            aria-label="Enter your pin"
            aria-labelledby={"pin-input-label-" + id}
            aria-describedby={"pin-input-description-" + id}
            containerClassName={cx("flex flex-row", styles[size].group, containerClassName)}
            className={cx("disabled:cursor-not-allowed", inputClassName)}
        />
    );
};
Group.displayName = "Group";

const Slot = ({ index, className, ...props }: ComponentPropsWithRef<"div"> & { index: number }) => {